Угловой материал: почему использование роутера в коврике панели инструментов меняет порядок строк

Question

У меня есть сценарий использования, которого я не нашел ни в каких демонстрационных материалах или руководствах по Angular, в которых я хочу динамически добавлять / удалять второй ряд панели инструментов Angular Material с использованием угловой маршрутизации.В частности, панель инструментов строка-1 должна быть предназначена для навигации по приложению, а панель инструментов-строка-2 должна предлагать дополнительные функции для конкретной страницы после загрузки этой страницы.

У меня есть то, что я считал решением, но я обнаружил, чтоВ процессе сборки создается html, который принимает элемент <router-outlet>, а всегда размещает его в качестве первого элемента сразу после <mat-toolbar>.Сборка делает это без предупреждения или ошибки.Я подозреваю, что это соглашение явно незаконно, но, как я уже сказал, я не могу найти документацию по этому вопросу.

Q.Может кто-нибудь объяснить это поведение и, возможно, предложить альтернативное решение ?

Демонстрационный демонстрационный код можно найти здесь, в stackblitz .Ниже вы найдете:

• Ключевые разделы кода.
• Полученный фрагмент HTML-кода из процесса сборки Angular

---

app.component.html

Содержит панель инструментов «Угловой материал» и, внутри нее, заполнитель 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>

app-routing-module

Содержит некоторую маршрутизацию для включения и выключения mat-toolbar-row.

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

строка панели инструментов.component.html

mat-toolbar-row для самой строки 2 ...

<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.Что касается моей первоначальной проблемы, описанной выше, если я напрямую заменю router-outlet на селектор компонента app-toolbar-row, теперь в консоли отладки возникают ошибки.Очевидно, что mat-toolbar весьма чувствителен к использованию прокси для mat-toolbar-row в своей области действия.

По крайней мере, отсутствие ошибки / предупреждения относительно использования router-outlet является дефектом в Angular Material.

РЕДАКТИРОВАТЬ: я обновил вышеупомянутый стек стека, чтобы отразить этот более простой сценарий тестового кода.