使用 Angular 2 的新路由来更改页面标题

17 浏览
0 Comments

使用 Angular 2 的新路由来更改页面标题

使用Angular 2 CLI时，在浏览器中更改应用程序页面标题的正确方法是什么？

0

1 答案

0 Comments

问题的出现原因是在Angular 2的新路由中，当页面加载时，router.events.subscribe不会触发，因此无法设置页面的标题。解决方法是将获取标题的代码放到构造函数中，这样可以在页面加载时直接获取标题。

具体的解决方法如下所示：

1. 在app.component.ts文件中，创建一个AppComponent类，并在构造函数中注入Title和Router服务。

export class AppComponent { 
  constructor(titleService: Title, router: Router) {
    // 在路由事件中订阅NavigationEnd事件
    router.events.subscribe(event => {
      // 如果是NavigationEnd事件，则获取当前路由的标题
      if(event instanceof NavigationEnd) {
        var title = this.getTitle(router.routerState, router.routerState.root).join('-');
        console.log('title', title);
        // 使用Title服务设置页面标题
        titleService.setTitle(title);
      }
    });
  }
  
  // 递归地从所有子路由中收集标题数据
  getTitle(state, parent) {
    var data = [];
    if(parent && parent.snapshot.data && parent.snapshot.data.title) {
      data.push(parent.snapshot.data.title);
    }
    if(state && parent) {
      data.push(... this.getTitle(state, state.firstChild(parent)));
    }
    return data;
  }
}

这样，当页面加载时，router.events.subscribe会触发，从而获取到当前路由的标题，并使用Title服务设置页面标题。

另外，在app.component.ts文件中，还可以使用一行代码的解决方法来获取标题。具体代码如下：

if(event instanceof NavigationEnd) { 
  this.title = router.routerState.root.snapshot.firstChild.data.title; 
}

将上述代码块移到构造函数中即可解决首次加载页面时无法设置标题的问题。

参考链接：

- https://github.com/angular/angular/issues/9662#issuecomment-229034288

- https://toddmotto.com/dynamic-page-titles-angular-2-router-events

- gist.github.com/nicu-chiciuc/7be9608893ca16fb324982f89d56995e

0