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

Question

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

export class DetailsComponent {

    constructor(private router: Router) {

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

            if (event instanceof NavigationEnd) {
            }
        });

   }
}

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

Answer 1

您的事件继续被检测到的原因是您的事件被销毁router.events后您没有取消订阅DetailsComponent。

如果您只是取消订阅，它应该对您有用：

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示例。