angular5+动态设置页面标题title

约定不等于承诺〃 2021-12-15 22:25 695阅读 0赞

在实际的开发项目当中,经常需要对访问网页的title进行动态配置,就像这样的东东,

20190703122020322.png

所以今天来记录下怎么动态配置title

一、首先,准备一个 .json的配置文件放置在静态资源assets文件夹下

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70

二、把项目的index中的title置空

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70 1

三、由于angular提供了一个title的服务,所以在app.module.ts文件中providers中注入title

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70 2

四、在项目的根组件app.component.ts中,先在constructor中引入title服务,然后在通过http请求本地之前创建的静态的配置文件,最后通过setTitle()函数就可以动态的设置项目的title了。这样做的有点在与经常会变动的title,只是修改配置文件就可以完成,无需再更改页面,当然配置文件也可以放在服务端,原理是一样的。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70 3


20191229112121499.png

想要整理更多的碎片知识,扫码关注下面的公众号,让我们在哪里接着唠!

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70 4

发表评论

表情:
评论列表 (有 0 条评论,695人围观)

还没有评论,来说两句吧...

相关阅读