我可以根据屏幕尺寸在不同的模板中使用相同的 Angular 路由器插座吗

如何解决我可以根据屏幕尺寸在不同的模板中使用相同的 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-toolbar。

有没有办法让它起作用？

我知道这听起来像其他一些问题，但我没有使用子路由。相同的路由器内容显示在路由器插座的适当反应式设计中。

如果有类似的问题有答案，请分享链接，因为我还没有找到。

解决方法

我认为您对 fxShow 有问题。它隐藏了元素。但它是 DOM 的一部分。这意味着您有两个路由器插座。尝试使用 *ngIf 代替。使用 *ngIf 它不是 DOM 的一部分。