Question

我正在使用Angular Flex布局的Angular 7项目。在桌面视图上，我在移动设备上有一个标签导航和一个sidenav。我使用fxHide和fxShow显示正确的导航。但是，只要有两个路由器出口，我的路由在台式机或移动设备上都会中断。如果该路由在台式机上不起作用，则必须对移动电源发表评论，反之亦然。

fxHide将显示设置为无，那么隐藏的插座为什么起作用？

我不能使用命名的出口，因为我的导航共享相同的路线，而且它弄乱了网址。

我在Stackblitz中重现了我的问题： https://stackblitz.com/edit/angular-kaejkr?embed=1&file=src/app/app.component.html&view=preview

app.component.html

<a fxHide fxShow.gt-xs="true" routerLink="hello">desktop-nav</a>
<a fxShow fxHide.gt-xs="true" routerLink="hello">mobile-nav</a>

<div class="desktop" fxHide fxShow.gt-xs="true">
    <router-outlet></router-outlet>
</div>

<div class="mobile" fxShow fxHide.gt-xs="true">
   <router-outlet></router-outlet>
</div>

app.routing.ts

const routes: Routes = [
  { path: "", redirectTo: "hello", pathMatch: "full" },
  { path: "hello", component: HelloComponent }
];

Answer 1

在这种情况下，您不需要两个路由器插座，因为为台式机与移动设备（或其他响应断点）建立单独的路由没有意义。

我有an example Stackblitz here展示了如何使用动态JSON路由/菜单数据设置SideNav（lt-md）和标签页（gt-sm）。

您没有指定SideNav是否在移动设备上永久打开，但是即使mat-sidenav是永久性的或临时的并且没有显示，您的UI仍将显示在mat-sidenav-container中。

<mat-sidenav-container>
  <mat-sidenav #appDrawer mode="over" opened="false">
    <mat-nav-list>
      <app-menu-list-item *ngFor="let item of navItems[0].children[1].children" [item]="item">
      </app-menu-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <app-top-nav fxHide.xs [navItems]="navItems[0].children[1].children"></app-top-nav>
  <router-outlet></router-outlet>
</mat-sidenav-container>

然后在此处的app-top-nav中，您可以使用菜单按钮显示工具栏，以打开mat-sidenav或md-tabs使用响应性fxHide属性：

<mat-toolbar color="primary" class="mat-elevation-z1" fxHide.gt-sm>
  <button mat-icon-button id="menu" (click)="navService.openNav()">
    <mat-icon>menu</mat-icon>
  </button>
  <span>Dynamic Expanding Nav Drawer Example</span>
</mat-toolbar>
<nav mat-tab-nav-bar backgroundColor="primary" fxHide.lt-md>
  <a mat-tab-link
     *ngFor="let link of navItems"
     [routerLink]="link.route"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
     <mat-icon class="routeIcon">{{link.iconName}}</mat-icon>&nbsp;
    {{link.displayName}}
  </a>
</nav>

多个路由器插座和fxHide / fxShow：为什么会中断我的路由？

1 个答案: