如何将路由事件 URL 绑定到 Angular 中的 HTML 模板
How to bind routing events URL into HTML template in Angular
我有一个 angular 组件,我试图在其中绑定一个基于路由器 URL 的 public 变量。 public 变量在 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/ 一个好的开始
我有一个 angular 组件,我试图在其中绑定一个基于路由器 URL 的 public 变量。 public 变量在 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/ 一个好的开始