Question

我正在使用Angular 6，并且有一个非路由组件，该组件需要从我导航到的路由中访问已解析的数据。

阅读一遍，我认为我需要利用路由器事件来让我的组件知道NavigationEnd事件何时发生。

到目前为止，我的ngOnInit（）中已包含以下内容：

this.router.events.pipe(
  filter(event => event instanceof NavigationEnd)
  ).subscribe((route: ActivatedRoute) => {
      console.log(route);
  });

但是当我在控制台中查看输出时，我只会得到一些像这样的属性：

NavigationEnd {id: 2, url: "/trip-schedule", urlAfterRedirects: "/trip-schedule"}

我还注意到，只有当我使用绑定到routerLink的元素导航到某个状态时，才会触发此事件。如果我在路由器实例本身上调用navigation（），则看不到任何输出记录。

我应该采用其他方式吗？

谢谢

Answer 1

可以通过以下方式从ActivatedRoute读取路由数据：

    @Component({
      selector: 'app-root',
      template: `<router-outlet></router-outlet>`,
      styleUrls: ['./app.component.css'],
    })
    export class AppComponent   {

    constructor(private route: ActivatedRoute, private router: Router,) {

       this.router.events.pipe(
          filter(event => event instanceof NavigationEnd)
        ).subscribe((route: ActivatedRoute) => {
          console.log(route);
          console.log(this.route.snapshot.firstChild.data);
       });

    }

但是使用此解决方案，您必须使用一些访问者root，firstChild，children，parent等了解您有趣的ActivatedRoute的深度和位置。我的例子简化了。

Angular 6-如何从非路由组件访问路由解析数据

1 个答案: