如何根据导航路径更改导航菜单

Question

我正在尝试根据路线变化显示不同的标题菜单。现在，只有路线刷新，我才能正常工作。但是，如果您在没有页面刷新的情况下点击从一个页面到另一个页面的链接，则不会进行更改。

这是我的app.component.ts

export class AppComponent {

  isHeader: boolean;

  title = 'app works!';


  progress: number = 0;
  items: FirebaseListObservable<any[]>;

  name: string;

  constructor(private titleService: Title, af: AngularFire, private _r: Router) {

     this.name = 'Angular2'

     this._r.events.subscribe(event => {
      if (event instanceof RoutesRecognized) {
        console.log('navigated to:', event.url);
        console.log('route state', event.state);
        console.log('');

      }
      else if (event instanceof NavigationEnd) {
        // if u dont need the state, you could even use this event-type..
        console.log('navigated to:', event.urlAfterRedirects);
        if(event.urlAfterRedirects === '/home'){
          console.log("this is home");
          this.isHeader = true;
        }
      }
    });

  }

这是我的app.component.html

<!--*ngIf="!isHeader"-->
<div *ngIf="isHeader">
  Navigation just for the home route if route end  === /home
</div>

<div *ngIf="!isHeader">
  navigation for other routes but not the homepage
</div>

我得到了导航路线，如果匹配/ home我改变了标题。这仅适用于路由刷新但直接导航，它保持已经状态。

if(event.urlAfterRedirects === '/home'){
     console.log("this is home");
     this.isHeader = true;
  }