Angular 角度变化观测器

我在不同的组件中使用路由器更改观察器。我想让它可重用，所以我不需要将此代码包含到每个需要它的组件中。我怎样才能做到这一点

changeObserver = null;

constructor(private router: Router) {
        this.changeObserver = router.events.pipe(
          filter(event => event instanceof NavigationEnd)  
          ).subscribe((event: NavigationEnd) => {
            if(event instanceof NavigationEnd)
              // change of url
              //--
              // call some component functions - different for each component
              //--
          });
       }

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

---

您可以创建一个抽象类来实现您想要的，并扩展您想要的路由实现

abstract class BaseComponent {
    observer;

    constructor() {
        this.observer = [1, 2, 3].forEach(number => {
            this.do(number);
        });
    }

    onDestroy() {
        // this.observer.unsubscribe();
    }

    abstract do(number);
}

并实施：

class Component extends BaseComponent {
    do(number) {
        console.log(number);
    }
}

---

您可以创建一个单独的服务类来处理这段代码，并将为您提供处理异步操作的回调选项

导航服务 组件中 注意：代码是直接在stackoverflow编辑器中编写的，因此可能存在一些打字错误和语法错误。请改正一下

---

看起来不错，但在我离开此组件并希望另一个组件具有相同功能后，如何取消订阅？通过此设置，回调将相互添加。已解决此问题。已从app.module提供程序中删除并添加到组件提供程序中。还将

ngondestory（）{…unsubscribe（）；}

添加到服务中。服务单身是个问题。像这样的解决方案有什么问题吗？这是绝对好的。谢谢你的回答，但因为我已经用其他类扩展了组件，所以我选择了服务解决方案。

@Injectable()
export class NavigationService {

  private changeObserver;

  constructor(private router: Router) {

  }

  execute(callback) {
    this.changeObserver = router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      if (event instanceof NavigationEnd)
              callback();
        });
  }

}

constructor(private NavigationService: navigationService) {

        this.navigationService.execute(()=>{
             //your code goes here.
        });
       }