Angular：如何检测当前组件的路由变化？

Question

我想检测来自当前组件的路由并尝试了类似的方法。但它会在每条路线的开始和结束时触发。取而代之的是，当来自此DetailsComponent 的路由时，我如何仅检测路由更改？

export class DetailsComponent {

    constructor(private router: Router) {

        this.router.events.subscribe((event: Event) => {
            if (event instanceof NavigationStart) {
            }

            if (event instanceof NavigationEnd) {
            }
        });

   }
}

我需要在导航时从这个DetailsComponent获取url，如果url不是/employees，则进行操作。

Answer 1

您的事件继续被检测到的原因是，当您的DetailsComponent 被销毁时，您并未取消订阅router.events。

如果您只是取消订阅，它应该适合您：

export class DetailsComponent {
  private sub = this.router.events
    .pipe(
      filter(event => event instanceof NavigationStart),
      map(event => event as NavigationStart),  // appease typescript
      filter(event => event.url !== '/employees')
    )
    .subscribe(
      event => console.log('[DetailsComponent] NOT going to "/employees"!', event)
    );

  constructor(private router: Router) { }

  ngOnDestroy() {
    console.log('>> STOP listening to events for DetailsComponent');
    this.sub.unsubscribe();
  }

}

这是一个StackBlitz 示例。