Могу ли я использовать один и тот же роутер-розетку Angular в разных храмах в зависимости от размера экрана

Я пытаюсь сделать так, чтобы на моей главной странице была панель инструментов mat-sidenav, когда экран находится на рабочем столе, но я использую панель инструментов mat-toolbar, когда она находится на планшетах и ​​мобильных устройствах. У меня нет проблем с этим. Проблема, с которой я сталкиваюсь, - это отображение роутера-розетки. Я хочу, чтобы для обоих макетов использовалась одна и та же розетка маршрутизатора. Я пробовал множество способов сделать это, но в результате всегда получается мобильная панель инструментов, на которой работает роутер. Вот несколько примеров того, что я пробовал.

Попробуйте №1

app.component.html

<div fxShow.lt-md="false">
  <mat-sidenav-container class="nav-container">
    <mat-sidenav opened mode="side" class="nav-menu">Side Nav</mat-sidenav>
    <mat-sidenav-content>
      <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

<div fxShow.gt-sm="false">
  <mat-toolbar fxLayout="row" fxLayoutAlign="center center">
    <span>Top Nav</span>
  </mat-toolbar>
  <router-outlet></router-outlet>
</div>

Попробуйте №2

Разделение двух навигационных компонентов

side-nav.component.html

<mat-sidenav-container class="nav-container">
  <mat-sidenav opened mode="side" class="nav-menu">Side Nav</mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

top-nav.component.html

<mat-toolbar fxLayout="row" fxLayoutAlign="center center">
  <span>Top Nav</span>
</mat-toolbar>
<router-outlet></router-outlet>

app.component.html

<app-side-nav></app-side-nav>
<app-top-nav></app-top-nav>

Попробуйте №3

Я также попытался добавить роутер-выход к его собственному компоненту и заменил роутер-выход в app.component.html.

content.component.html

<router-outlet></router-outlet>

app.component.html

<div fxShow.lt-md="false">
  <mat-sidenav-container class="nav-container">
    <mat-sidenav opened mode="side" class="nav-menu">Side Nav</mat-sidenav>
    <mat-sidenav-content>
      <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

<div fxShow.gt-sm="false">
  <mat-toolbar>
    <span>Top Nav</span>
  </mat-toolbar>
  <app-content></app-content>
</div>

Но он по-прежнему отображается только для панели инструментов mat.

Есть ли способ заставить это работать?

Я знаю, что это похоже на некоторые другие вопросы, но я не использую дочерние маршруты. То же содержимое роутера отображается в соответствующем реактивном дизайне в роутере-розетке.

Если есть аналогичный вопрос с ответом, поделитесь ссылкой, потому что я ее не нашел.