[英]How to bind routing events URL into HTML template in Angular
我有一个角度组件,我试图在其中绑定基于路由器 URL 的公共变量。 公共变量在 subscribe 方法中分配了一个值,因此模板不会在初始加载时更新。
pageTitle: string;
constructor(private router: Router) {}
ngOnInit() {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
if(event.url ==="something" {
this.pageTitle ="About US"
}
}
})
}
我在 HTML 文件中绑定pageTitle变量
<div class="title">{{pageTitle}}</div>
刷新页面时,我可以看到 pageTitle,但在初始加载时未显示该值。
如果您的 pageTitle 更改,您应该尝试使其可观察并使用async
管道处理以使其保持最新状态
添加了 Stackblitz 实现: https ://stackblitz.com/edit/angular-scdiic
尝试这样的事情
this.title = this.route.events.pipe(
filter(event => event instanceof NavigationEnd),
map((event: NavigationEnd) => event.url));
<div class="title">{{pageTitle | async}}</div>
也为了更好地了解更改检测如何在 Angular 中工作,如下所示: https : //auth0.com/blog/understanding-angular-2-change-detection/一个良好的开端
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.