我想为 Angular 应用程序中的每个单独路由设置静态标题(即 <title>
)。如果路由不包含标题,则应使用默认标题。每个标题都应该有一个共同的后缀。
我可以使用 title.setTitle()
在每个页面组件中,但如果组件没有指定标题,则标题不会更改为默认标题。如何添加公共(public)后缀是这个场景下的另一个问题。
或者我可以使用 router.event.subscribe()
在一个地方管理我的头衔,但我不知道如何区分路线或获取当前路线的任何数据。
在 Angular 应用中管理标题的正确和干净的方法是什么?
最佳答案
您可以创建一个专门用于更新标题组件中的标题的服务。只需在您的 header 组件中注入(inject)服务并订阅专用的 BehaviorSubject。然后,您可以在您拥有的任何组件中注入(inject)此服务,并使用该组件的 setTitle
方法,该方法将更新 header 组件中的标题。查看以下代码。
代码:
//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');
}
关于javascript - 如何在 Angular 2 中为不同的路线设置标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47993096/