提供来自路由同级组件的组件内容

Question

我的Angular应用使用RouterModule导航到不同的组件。在路由组件上方有一个全局工具栏：

// app.component.ts
@Component({
  selector: 'app-root',
  template: `
    <div class="toolbar">
        <!-- ... -->
    </div>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
}

工具栏包含一个菜单。我的目标是允许组件使用特定于组件的操作来扩展工具栏的菜单。

我的简单想法是编写一个自定义指令，其中将包含每个组件的工具栏扩展模板。该组件的模板如下所示：

<!-- b.component.html -->
<div appToolbar title="Title of Component-B">
  <a class="nav-link" (click)="action1()">menu-entry 1 of component B</a>
</div>
Content of Component-B

我的应用程序组件将使用[appToolbar]查找@ViewQuery(ToolbarDirective, {read: ElementRef})元素。这将允许我将工具栏扩展的DOM节点移至实际的工具栏。

但是，这不起作用，因为@ViewChild找不到孙子。

一种解决方法是使用router-outlet的{​​{1}}事件，该事件提供对组件实例的引用：

(activate)

然后我的A和B组件必须提供视图查询：

<router-outlet (activate)="onActivate($event)"></router-outlet>

我的应用程序组件可以访问它们：

@Component(/* ... */)
export class AComponent {
  @ViewChild(ToolbarDirective, {read: ElementRef}) toolbarElRef;
}

...但是我不喜欢它，因为我认为它太编译了，我也不知道它是否有效。

我已经在许多（移动）应用程序中看到了特定于范围的菜单项，所以我认为这并不是一件很不常见的事情。这就是为什么我想知道是否有一个简单的解决方案。