我想为Angular应用程序中的每个单独路径设置静态标题(即< title>).如果路线不包含标题,则应该具有默认标题.每个标题都应该有一个共同的后缀.
我可以在每个页面组件中使用title.setTitle(),但如果组件没有指定标题,则标题不会更改为默认标题.如何添加公共后缀是此方案中的另一个问题.
或者我可以使用router.event.subscribe()在一个地方管理我的标题,但我不知道如何区分路线或获取当前路线的任何数据.
在Angular应用程序中管理标题的正确和干净方式是什么?
解决方法:
您可以创建专用于更新标题组件中标题的服务.只需在头部组件中注入服务并订阅专用的BehaviorSubject即可.然后,您可以在您拥有的任何组件中注入此服务,并使用该组件中的setTitle方法,该方法将更新标头组件中的标题.请查看以下代码.
码:
//headerTitle.service.ts
@Injectable()
export class headerTitleService {
title = new BehaviorSubject('Initial Title');
setTitle(title: string) {
this.title.next(title);
}
}
//header.component.ts
title = '';
constructor(private headerTitleService: HeaderTitleService) {}
ngOnInit() {
this.headerTitleService.title.subscribe(updatedTitle => {
this.title = updatedTitle;
});
}
//header.component.html
<h1>{{title}} - Suffix title</h1>
//about.component.ts
constructor(private headerTitleService: HeaderTitleService) {}
ngOnInit() {
this.headerTitleService.setTitle('About');
}
原文地址:https://codeday.me/bug/20190701/1348074.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。