0

当屏幕在桌面上时，我试图让我的主页有一个 mat-sidenav，但在平板电脑和移动设备上使用 mat-toolbar。完成这件事我没有问题。我遇到的问题是显示路由器插座。我希望两种布局都使用相同的路由器插座。我尝试了很多方法来完成这项工作，但结果始终是移动 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>

顶部导航组件.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 。

有没有办法让它工作？

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

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

4

1 回答 1

0

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

于 2021-01-05T11:40:51.890 回答