基于可观察的 route.events 设置类

Question

（角度 7） 在发生重定向后，我在将侧导航菜单选项设置为活动时遇到了一些问题。它在所有其他时间都可以正常工作。我有一个侧导航，它的活动类集基于一个名为 activeRoute 的字段

侧边栏 html

   <mat-list-item *ngFor="let menuItem of sidebarMenu" class="menu-item" 
   [ngClass]="{'menu-item-active': activeRoute === menuItem.route}" 
   (click)="openPage(menuItem.route)">
   <h4 mat-line>{{menuItem.label}}</h4>
   </mat-list-item>

这是我的 sidenav 组件，请注意我之前使用的是 event.url 而不是 event.urlAfterRedirects，但它不是控制台在重定向后记录正确的值，直到我发现后者。

侧边栏组件

ngOnInit() {
this.route.events.subscribe(event => {
  if (event instanceof NavigationEnd ) {
    this.activeRoute = event.urlAfterRedirects;    
  }
});
}

我尝试使用

运行手动更改检测

this.changeDetectorRef.detectChanges()

但我会收到以下错误

Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges

设置活动路由在正常导航下工作，但是当我实现身份验证时，将用户从 /callback 路由重定向到请求的路由，它不会添加活动类，大概是因为它试图读取的值是一个可观察的。我不太清楚应该如何纠正这个问题，要么以另一种方式读取 url，要么有办法在返回结果时异步更新类。

Answer 1

使用 RxJS 操作符而不是随意的条件，并在销毁组件时停止监听路由事件：

ngOnInit() {
  this.eventsObs = this.route.events
    .pipe(filter(event => event instanceof NavigationEnd))
    .subscribe(event => this.activeRoute = event.urlAfterRedirects);
}

ngOnDestroy() { this.eventsObs.unsubscribe(); }

如果您想了解更多信息，请考虑提供Minimal, Complete, and Verifiable example 来重现您的问题。我将向您解释管理这种用例的最佳方法是什么。