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

Question

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

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

问。谁能解释这种行为，并可能提供替代解决方案？

可以从here in stackblitz中找到提要的演示代码。在下面，您将找到：

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

---

app.component.html

包含一个Angular Material工具栏，其中还包含<mat-toolbar>占位符，用于选择第二个router-outlet。

mat-toolbar-row

应用程序路由模块

包含一些路由，用于将<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

toolbar-row.component.html

第2行本身的const routes: Routes = [ { path: 'toolbar', component: ToolbarRowComponent }, { path: '', redirectTo: '', pathMatch: 'full' } ]; ...

mat-toolbar-row

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

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

Answer 1

似乎mat-toolbar和多个mat-toolbar-rows要求在mat-toolbar的范围内明确定义工具栏行。关于上述原始问题，如果我将router-outlet直接替换为组件选择器app-toolbar-row，则调试控制台中现在会出现错误。显然，mat-toolbar对于在其范围内为mat-toolbar-row使用代理非常敏感。

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

编辑：我已经更新了上面的堆栈闪电，以反映这种更简单的测试代码方案。