多个路由器插座和 fxHide/fxShow：为什么它会破坏我的路由？答案

【问题标题】：Multiple router-outlets and fxHide/fxShow: why does it break my routing?多个路由器插座和 fxHide/fxShow：为什么它会破坏我的路由？
【发布时间】：2019-06-28 07:46:33
【问题描述】：

我正在使用 Angular Flex 布局的 Angular 7 项目。在桌面视图上，我在移动设备上有一个标签导航和一个 sidenav。我使用 fxHide 和 fxShow 来显示正确的导航。但是只要有两个路由器插座，我的路由就会被破坏，无论是在桌面还是移动设备上。如果路由在桌面上不起作用，我必须评论移动出口，反之亦然。

fxHide设置显示为none，为什么隐藏的outlet有效果？

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

我在 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 }
];

【问题讨论】：

为什么需要两个路由器插座？如果您能解释这一点，我会尽力提供帮助。另外，请注意，您的 stackblitz 与您在此处粘贴的代码不同...您能否更新一下，使它们保持一致。

标签： angular routing angular-flex-layout router-outlet

【解决方案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 中，您可以使用响应式fxHide 属性显示带有用于打开mat-sidenav 或md-tabs 的菜单按钮的工具栏：

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

【讨论】：