角材料：為什么在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，以反映此更簡單的測試代碼方案。