我可以根据屏幕尺寸在不同的模板中使用相同的 Angular router-outlet

Question

我试图让我的主页在桌面屏幕上有一个 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

分离两个导航组件

边-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

我也试过将 router-outlet 添加到它自己的组件中，并替换了 app.component.html 中的 router-outlet。

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>

但它仍然只显示垫子工具栏。

有没有办法让它工作？

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

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

Answer 1

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

的一部分

我可以根据屏幕尺寸在不同的模板中使用相同的 Angular router-outlet

Can I use the same Angular router-outlet in different templets based on screen size

angular-material

router-outlet

angular

mat-sidenav