angular 2 router.events 订阅未触发答案

【问题标题】：angular 2 router.events subscription not firingangular 2 router.events 订阅未触发
【发布时间】：2017-07-21 17:01:14
【问题描述】：

我正在使用一个面包屑组件来订阅 router.events。问题是组件第一次加载时，它不会触发订阅。

ngOnInit(): void {
  console.log("oninit beradcumbs");
  this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
    this.breadcrumbs = [];
    let currentRoute = this.route.root,
    url = '';
    do {
      const childrenRoutes = currentRoute.children;
      currentRoute = null;
      childrenRoutes.forEach(route => {
        if (route.outlet === 'primary') {
          const routeSnapshot = route.snapshot;
          url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
          this.breadcrumbs.push({
            label: route.snapshot.data,
            url:   url
          });
          currentRoute = route;
        }
      });
    } while (currentRoute);
    console.log("Breadcumbs",this.breadcrumbs);
  });
}

当单击具有 routerLink 属性的链接时，订阅会发出值并且它工作正常。我将我的项目与使用 Augury 的项目进行了比较，在面包屑组件中，Router 的状态如下所示：Not working Router

还有工作的：Working router

如果您需要更多信息来帮助您，请立即联系我 :) 提前致谢！

【问题讨论】：

把这段代码放到constructor()中
@Vega 是的，它有效！但我不明白为什么。我正在使用与该组件的其他项目相同的代码

标签： angular angular2-routing

【解决方案1】：

您的代码正在通过订阅异步加载数据。我建议把它放在constructor()中，所以它会在生命周期钩子之前执行，因此在OnInit()之前，数据会在你点击链接之前加载。这是对的。因此，请更仔细地查看 Observables，以更好地了解正在发生的事情。

【讨论】：

谢谢！我知道 observables，但对为什么 router.events 在组件捕获值之前发出一些疑问，因为它是共享组件并且在引导程序上实例化。

【解决方案2】：

在 Angular 9 中也存在生命周期钩子后不触发路由器订阅事件。根据贡献者this 的说法，无法保证路由器事件与组件生命周期钩子交错的顺序。

我们可以做一个简单的测试来确定路由器事件何时触发。

constructor(private router: Router) { 
   console.log('constructor')
   this.router.events.pipe(filter(event => 
       event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
         console.log(event);
   });
 }

ngOnInit(): void {
  console.log('ngOnInit')
}

在打印“ngOnInit”之前，您将在控制台上看到路由器事件已打印在控制台上。所以订阅路由器事件的正确位置是构造函数。

【讨论】：