美文网首页Angular8 设定页面标题title
Angular8 设定页面标题title
- Angular8 设定页面标题title
- {黄黄来之} html js获取页面的内容</a></li><li><a href="#r3">html优化SEO</a></li><li><a href="#r4">google搜索引擎优化(SEO)入门指南笔记</a></li><li><a href="#r5">第一天总结</a></li><li><a href="#r6">unittest--断言</a></li><li><a href="#r7">2018-08-06界面测试</a></li><li><a href="#r8">Day1总结</a></li><li><a href="#r9">2018-08-06</a></li><li><a href="#r10">第一天总结</a></li></ol></div>
<blockquote>
<p>最近在用Angular8.1.0写个微信公众号的项目架构，由于angular是单页面框架，并无页面之分，所以想实现切换页面title，并不能直接html设置，但别担心，angular有专门的模块可以处理，如下：</p></blockquote>
<pre><code>import { Title } from '@angular/platform-browser';
</code></pre>
<p>ts具体用法：</p>
<pre><code> constructor(private titleService: Title) { }
this.titleService.setTitle(`页面title`);
</code></pre>
<p>这样就能设定每个页面的title啦，是不是很简单 :)</p>
<p>但是，在每个页面都写一次是不是很繁琐呢，也不利于管理标题。是否有一种更简单的设定方法呢，如果只在业务代码中写一次，是不是就很友好了！<br>
所以，可以将设定页面title封装成一个公共方法<code>setTitle</code>。</p>
<p>在官网<a href="https://links.jianshu.com/go?to=https%3A%2F%2Fwww.angular.cn%2Fguide%2Frouter" target="_blank">angular路由</a>中向我们介绍了路由上<code>data</code>属性，为管理页面title提供了便利。</p>
<h4>1、先配置页面的路由文件，设置data属性中的title</h4>
<pre><code>const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent, data: { title: '主页' } },
{ path: 'personalCenter', component: PersonalCenterComponent,
data: { title: '个人中心' } },
{
path: 'bindCard',component: BindingCardComponent,
data: { title: '绑定就诊卡' }
},
{
path: 'hasCard', loadChildren: () => import(`./pages/has-card/has-card.module`).then(m => m.HasCardModule),
},
{
path: 'reservation', loadChildren: () => import(`./pages/reservation/reservation.module`).then(m => m.ReservationModule),
data: { title: '自助预约' }
},
// { path: 'confirmOrder', loadChildren: './confirm-order/confirm-order.module#ConfirmOrderPageModule' }
];
</code></pre>
<p>已经设置好了标题，但是如果让设置的title起效果呢，就要看下一步了</p>
<h4>2、创建一个公共服务<code>CommonService</code>
</h4>
<pre><code>import { Injectable } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { map, filter } from "rxjs/operators";
@Injectable({
providedIn: 'root'
})
export class CommonService {
constructor(private router: Router,
private activatedRoute: ActivatedRoute,
private titleService: Title) {
}
public setTitle() {
this.router.events
.pipe(
filter(event => event instanceof NavigationEnd),
map(() => this.router)
)
.subscribe((event) => {
const titles = this.getTitle(this.router.routerState, this.router.routerState.root);
const title = titles[titles.length - 1];
// console.log(title);
if (title) {
this.titleService.setTitle(title);
}
});
}
public getTitle(state, parent) {
const data = [];
if (parent && parent.snapshot.data && parent.snapshot.data.title) {
data.push(parent.snapshot.data.title);
}
if (state && parent) {
data.push(...this.getTitle(state, state.firstChild(parent)));
}
return data;
}
}
</code></pre>
<p>至此，核心方法封装好了，下一步就该用起来</p>
<h4>3、在根模块<code>app.component.ts</code>中调用</h4>
<p>引用注入公共服务<code>CommonService</code></p>
<pre><code>import { CommonService } from './services/common.service';
constructor(private common: CommonService) { }
ngOnInit() {
this.common.setTitle(); //设置页面标题
}
</code></pre>
<p>运行代码，大功告成！</p>
</div><div class="relateds"><h2>相关文章</h2><ul><li id="r1"><h3><a href="/subject/zohxjctx.html">Angular8 设定页面标题title</a></h3><p>最近在用Angular8.1.0写个微信公众号的项目架构，由于angular是单页面框架，并无页面之分，所以想实现...</p></li><li id="r2"><a href="/user/mxgvhxtx.html"><img src="https://img.haomeiwen.com/us14479286/39836dcf-9d0d-4a18-8af5-0478e1036ec1" width="80"></a><h3><a href="/subject/nhqkictx.html">{黄黄来之} html js获取页面<title>的内容</a></h3><p>页面标题 js代码:document.title</p></li><li id="r3"><a href="/user/pwootxtx.html"><img src="https://img.haomeiwen.com/us12301707/df97a23d-c605-4c30-9f5d-552bcbca4c85.jpeg" width="80"></a><h3><a href="/subject/hdwhrqtx.html">html优化SEO</a></h3><p>1、TDK Title页面标题，keywords页面关键词、description页面描述。 2、heading标...</p></li><li id="r4"><a href="/user/qjzftttx.html"><img src="https://img.haomeiwen.com/us52315/c35c1b16-288f-4868-9d2b-670ebfd77d85.jpg" width="80"></a><h3><a href="/subject/fyadxxtx.html">google搜索引擎优化(SEO)入门指南笔记</a></h3><p>title (标题)1.正确地描述页面的内容避免与页面内容无关的title避免使用默认或没有价值的title，比如...</p></li><li id="r5"><a href="/user/ybsyqxtx.html"><img src="https://img.haomeiwen.com/is13488709/969f8b8dd82a9611.png" width="80"></a><h3><a href="/subject/ulvgvftx.html">第一天总结</a></h3><p>****测试的内容1.界面-title标题-URI地址栏-LOGO图片-文本 title标题-菜单栏/导航栏-页面...</p></li><li id="r6"><a href="/user/kvyejttx.html"><img src="https://img.haomeiwen.com/us4789908/cd1baab6-3c7e-49e4-afc5-50e5045b3fbb.jpg" width="80"></a><h3><a href="/subject/mfqujxtx.html">unittest--断言</a></h3><p>断言方式页面链接地址（URL），页面标题（title），元素文本等。 常用断言</p></li><li id="r7"><a href="/user/uyrpqxtx.html"><img src="https://img.haomeiwen.com/ud/12-aeeea4bedf10f2a12c0d50d626951489.jpg" width="80"></a><h3><a href="/subject/dcccbftx.html">2018-08-06界面测试</a></h3><p>测试的内容 界面Title标题URL地址栏LOGO 图片文本Title标题菜单栏/导航栏页面显示内容Button ...</p></li><li id="r8"><a href="/user/pysyqxtx.html"><img src="https://img.haomeiwen.com/ud/4-3397163ecdb3855a0a4139c34a695885.jpg" width="80"></a><h3><a href="/subject/wnvgvftx.html">Day1总结</a></h3><p>测试内容 界面 标题title 地址栏URL LOGO图片 文本title标题 导航栏/菜单栏 页面显示内容 Bu...</p></li><li id="r9"><a href="/user/rmsyqxtx.html"><img src="https://img.haomeiwen.com/ud/12-aeeea4bedf10f2a12c0d50d626951489.jpg" width="80"></a><h3><a href="/subject/mrvgvftx.html">2018-08-06</a></h3><p>测试内容 1.界面 title标题 URL地址栏 LOGO图片 文本title标题 菜单/导航栏 页面显示内容 b...</p></li><li id="r10"><a href="/user/gwqdyttx.html"><img src="https://img.haomeiwen.com/is6101441/ea5449244b508d68.png" width="80"></a><h3><a href="/subject/pgygvftx.html">第一天总结</a></h3><p>测试的内容 界面Title标题LOGO 图片文本Title标题菜单栏/导航栏页面显示内容Button 按钮输入框下...</p></li></ul></div></div><div id="comments"><h2>网友评论</h2><ul></ul></div><ul></ul><div class="article_by"><div class="bytitle"><p>本文标题：<font color="#666">Angular8 设定页面标题title</font></p><p>本文链接：<font color="#666">https://www.haomeiwen.com/subject/zohxjctx.html</font></p></div></div></div><div class="meiwen-left fl mb"><div class="title ht"><h3>延伸阅读</h3><div class="share fr" id="bdshare"></div><i class="lt"></i><i class="rt"></i></div><div class="related"><ul class="related-list"><li><a class="meiwen" href="/mw/lbyctttx.html">那年盛夏诗歌</a></li><li><a class="meiwen" href="/sy/kbyctttx.html">环境监察队工作总结范文</a></li><li><a class="meiwen" href="/sy/hbyctttx.html">优秀教师学习心得范文</a></li><li><a class="meiwen" href="/sy/cbyctttx.html">华胥引的读后感300字</a></li><li><a class="meiwen" href="/yw/qbyctttx.html">《Its red》教学反思范文</a></li><li><a class="meiwen" href="/sy/fbyctttx.html">农资购销的合同范本</a></li><li><a class="meiwen" href="/sy/xbyctttx.html">竞选中队委优秀演讲稿</a></li><li><a class="meiwen" href="/yw/tbyctttx.html">辞金蹈海的成语解释</a></li><li><a class="meiwen" href="/ja/zvyctttx.html">《世纪宝鼎》公开课教案设计</a></li></ul></div><div class="picture" ><ul class="picture-list"><li><a class="meiwen" href="/article/69641.html"><img class="lazy" data-original="/uploads/allimg/1611/1-1611292156350-L.jpg" width="150" height="120" alt="因为爱你，所以牵挂"/><span>因为爱你，所以牵挂</span></a></li><li><a class="meiwen" href="/article/84632.html"><img class="lazy" data-original="/uploads/userup/2800/14V4C648-O08.jpg" width="150" height="120" alt="今生今世红尘醉——美到心碎的古诗词"/><span>今生今世红尘醉——美到</span></a></li><li><a class="meiwen" href="/article/53482.html"><img class="lazy" data-original="/uploads/allimg/1609/1-160ZPU1030-L.jpg" width="150" height="120" alt="一个90后的内心独白"/><span>一个90后的内心独白</span></a></li><li><a class="meiwen" href="/article/3639.html"><img class="lazy" data-original="/uploads/userup/1159/1432YGR-9294.jpg" width="150" height="120" alt="致已逝去的高中年华"/><span>致已逝去的高中年华</span></a></li></ul></div></div><div class="meiwen-left fl mb"><div id="pinglun"><div id="SOHUCS"></div></div></div><div class="meiwen-left fl"><div class="title ht"><h3>深度阅读</h3><ul class="list"><li><font color="#A2B088">您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！</font></li></ul><i class="lt"></i><i class="rt"></i></div><ul class="tags"><li><a class="meiwen" href="/huati/qingrenjie/">情人节</a></li><li><a class="meiwen" href="/huati/muqinjie/">母亲节</a></li><li><a class="meiwen" href="/huati/chongyangjie/">重阳节</a></li><li><a class="meiwen" href="/huati/qingmingjie/">清明节</a></li><li><a class="meiwen" href="/huati/duanwujie/">端午节</a></li><li><a class="meiwen" href="/huati/zhishujie/">植树节</a></li><li><a class="meiwen" href="/huati/yuanxiaojie/">元宵节</a></li><li><a class="meiwen" href="/huati/funvjie/">妇女节</a></li><li><a class="meiwen" href="/huati/yurenjie/">愚人节</a></li><li><a class="meiwen" href="/huati/shengdanjie/">圣诞节</a></li><li><a class="meiwen" href="/huati/fuqinjie/">父亲节</a></li><li><a class="meiwen" href="/huati/jiaoshijie/">教师节</a></li><li><a class="meiwen" href="/huati/ertongjie/">儿童节</a></li><li><a class="meiwen" href="/huati/laodongjie/">劳动节</a></li><li><a class="meiwen" href="/huati/qingnianjie/">青年节</a></li><li><a class="meiwen" href="/huati/jianjunjie/">建军节</a></li><li><a class="meiwen" href="/huati/wanshengjie/">万圣节</a></li><li><a class="meiwen" href="/huati/pinganye/">平安夜</a></li><li><a class="meiwen" href="/huati/guanggunjie/">光棍节</a></li><li><a class="meiwen" href="/huati/zhongqiujie/">中秋节</a></li><li><a class="meiwen" href="/huati/guoqingjie/">国庆节</a></li><li><a class="meiwen" href="/huati/ganenjie/">感恩节</a></li><li><a class="meiwen" href="/huati/labajie/">腊八节</a></li><li><a class="meiwen" href="/huati/">更多话题</a></li></ul></div><div class="cl"></div></div><div class="article-right"><div class="meiwen-right fr mb"><dt class="title hd"><h3>栏目导航</h3><i class="lt"></i><i class="rt"></i></dt><ul class="list-nav"><a class="meiwen" href="/c/hqtttttx.html">摄影</a><a class="meiwen" href="/c/vqtttttx.html">故事</a><a class="meiwen" href="/c/uttttttx.html">互联网</a><a class="meiwen" href="/c/cttttttx.html">读书</a><a class="meiwen" href="/c/yttttttx.html">旅行</a></ul></div></div><div class="meiwen-right fr mb"><div class="title hd"><h3>热点阅读</h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/ynhxjctx.html">常见设计模式一：单例模式</a></li><li><a class="meiwen" href="/subject/rnhxjctx.html">文旅部处理7家5A级景区，A级“持久力”大考如何通关</a></li><li><a class="meiwen" href="/subject/cnhxjctx.html">三行诗|| 孔雀石</a></li><li><a class="meiwen" href="/subject/xnhxjctx.html">21天，找到打开美好人生旅程的钥匙</a></li><li><a class="meiwen" href="/subject/oghxjctx.html">李昊阳爸爸——信件读后记19</a></li><li><a class="meiwen" href="/subject/mghxjctx.html">都在说文笔，文笔究竟是什么？</a></li><li><a class="meiwen" href="/subject/jghxjctx.html">周四课堂记录</a></li><li><a class="meiwen" href="/subject/dghxjctx.html">适合新手的 python pandas 学习笔记（1）</a></li><li><a class="meiwen" href="/subject/hghxjctx.html">怎样调节紧张情绪</a></li><li><a class="meiwen" href="/subject/qghxjctx.html">夜空中最亮的星</a></li></ul></div></div></div></div><div class="footer"><p class="p_1"><a href="/about/aboutus.html">关于我们</a>|<a href="/about/service.html">服务条款</a>|<a href="/about/contact.html">联系我们</a>|<a href="/subject/zohxjctx.html">Angular8 设定页面标题title</a>|<a href="/about/tougao.html">投稿指南</a>|<a href="/sitemap.html">网站地图</a>|<a href="/rssmap.html">RSS订阅</a>|<a href="/about/paiban.html">排版工具</a>|<a href="javascript:vod(0);" onclick="Mobileurl()">手机版</a></p><p class="p_2">提供<a href="/meiwen/zhaichao/">经典美文摘抄</a>,<a href="/sanwen/">优美散文欣赏</a>,<a href="/shige/xiandai/">现代诗歌精选</a>,<a href="/xiaoshuo/">短篇小说</a>,<a href="/diary/suibi/">心情随笔</a>,<a href="/qingshu/">表白情书</a><a href="/fanwen/">范文</a>,<a href="/gushi/">故事会在线阅读</a>欣赏</p><p class="p_2">Copyright © 2014-2023 <a href="/">Haomeiwen.com</a> All Rights Reserved. <a href="/">好美文阅读网</a> 版权所有</p><p class="p_2">备案信息：<i></i>桂公网安备 45052102000051号 · 桂ICP备13007215号-3</p><div class="footer_service"><p class="p_2">本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯</p><p class="p_2">所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！</p></div></div><script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="https://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script><script type="text/javascript">$("img.lazy").lazyload({effect : "fadeIn"});</script><script type="text/javascript" src="/img/jquery.meiwen.min.js"></script></body></html>
