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

你需要使用route.firstChild或route.children来实现它，就像使用params一样。

Answer 2

在<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>

这受到stripe.js

中第二种方法的启发

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);
        });
      }
    });

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

3 个答案: