角材料：为什么在mat-toolbar交换工具栏行顺序中使用router-outlet

Question

我有一个用例，在任何Angular演示或教程中都没有找到，我希望使用Angular路由来动态添加/删除Angular Material工具栏的第二行。 具体来说，工具栏第1行应用于应用程序导航，工具栏第2行应在页面加载后提供其他特定于页面的功能。

我有我认为是解决方案的方法，但是我发现构建过程生成的html带有<router-outlet>元素，并始终将其放置为紧随<mat-toolbar>之后的第一个元素。 该版本将执行此操作而不会发出警告或错误。 我怀疑这种安排显然是非法的，但正如我所说，我找不到任何相关文件。

问：谁能解释这种现象，也许可以提供替代解决方案 ？

摘录的演示代码可以在stackblitz中找到。 在下面，您将找到：

• 代码的关键部分。
• Angular构建过程中生成的html代码段

---

app.component.html

包含一个Angular Material工具栏，并在其中包含第二个mat-toolbar-row选项的router-outlet占位符。

<mat-toolbar>
  <mat-toolbar-row>
    <h2>This is toolbar row-1</h2>
  </mat-toolbar-row>

  <!-- Toolbar row #2 -->
  <router-outlet></router-outlet>
</mat-toolbar>

应用程序的路由模块

包含一些路由，用于切换mat-toolbar-row输入和输出。

const routes: Routes = [
  { path: 'toolbar', component: ToolbarRowComponent },
  { path: '', redirectTo: '', pathMatch: 'full' }
];

工具栏，row.component.html

第2行本身的mat-toolbar-row ...

<mat-toolbar-row>
  <h2>This is toolbar row-2</h2>
</mat-toolbar-row>

显示结果html的调试器输出片段

<mat-toolbar _ngcontent-c0="" class="mat-toolbar mat-toolbar-multiple-rows">
  <router-outlet _ngcontent-c0=""></router-outlet>
  <app-toolbar-row _nghost-c2="">
    <mat-toolbar-row _ngcontent-c2="" class="mat-toolbar-row">
      <h2 _ngcontent-c2="">This is toolbar row-2</h2>
    </mat-toolbar-row>
  </app-toolbar-row>
  <mat-toolbar-row _ngcontent-c0="" class="mat-toolbar-row">
    <h2 _ngcontent-c0="">This is toolbar row-1</h2>
  </mat-toolbar-row>
</mat-toolbar>

Answer 1

这样看来， mat-toolbar与多mat-toolbar-rows有一个工具栏行明确的范围内定义的需求mat-toolbar 。 关于我上面描述的原始问题，如果我直接用组件选择器app-toolbar-row替换router-outlet ，则会在调试控制台中引发错误。 显然， mat-toolbar在其范围内对使用mat-toolbar-row代理非常敏感。

至少，缺少关于使用router-outlet的错误/警告是Angular Material的缺陷。

编辑：我已经更新了上面的stackblitz，以反映此更简单的测试代码方案。