angular - 在路由器出口组件之外的组件中订阅路由参数

Question

我有一个工具栏组件在路由器插座上方对齐。路由器插座具有表格和图表等各种组件。

能够订阅使用路由器插座显示的任何组件中的路由参数。

我想从不属于插座的工具栏组件访问路由参数。（捕获当前路径以在工具栏上显示路线名称）

主要成分：

  <app-toolbar> </app-toolbar>
  <router-outlet> </router-outlet> // shows either a table or chart component

工具栏组件：

 export class ToolbarComponent {
   constructor(private route: ActivatedRoute) {
      this.route.subscriber(params => 
          { console.log(params) //param is empty }
   }
 }

表格组件：

 export class TableComponent{
       constructor(private route: ActivatedRoute) {
          this.route.subscriber(params => 
              { console.log(params) //param has data }
       }
     }

Answer 1

<app-toolbar>在您可以添加谎言的 MainComponent 中：

path$: Observable<String>;

constructor( private router: Router ) {
  this.path$ = this.router.events.pipe(
    filter(event => event instanceof RoutesRecognized),
    map((event: RoutesRecognized) => {
      return event.state.root.firstChild.url.join('/');
    }));
}

然后在 html 模板中，您可以编写如下内容：

<app-toolbar>{{ path$ | async }}</app-toolbar>

这是受到https://stackoverflow.com/a/46697826/9423231中的第二种方法的启发

Answer 2

您需要以与使用 params 相同的方式使用route.firstChild或route.children实现它。

Answer 3

将您的工具栏组件修改为

工具栏组件：

    this.router.events.subscribe((val) => {
      if (val instanceof NavigationEnd) {
        let r = this.route;
        while (r.firstChild) {
          r = r.firstChild;
        }
        r.params.subscribe((params) => {
          this.healthStatus(params);
        });
      }
    });