Несколько выходов маршрутизатора и fxHide / fxShow: почему это нарушает мою маршрутизацию?

Question

Я работаю над проектом Angular 7 с макетом Angular Flex.На рабочем столе у ​​меня есть вкладки навигации и sidenav на мобильном телефоне.Я использую fxHide и fxShow для отображения правильной навигации.Но до тех пор, пока здесь есть два выхода маршрутизатора, моя маршрутизация нарушена, либо на настольном компьютере, либо на мобильном устройстве.Если маршрутизация не работает на настольном компьютере, я должен прокомментировать мобильную розетку и наоборот.

fxHide устанавливает для дисплея значение «Нет», так почему скрытая розетка имеет эффект?

IЯ не могу использовать именованные выходы, так как мои навигационные ресурсы используют одни и те же маршруты, плюс они испортили URL.

Я воспроизвел мою проблему в 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

Для этого случая вам не нужны две розетки маршрутизатора, так как не имеет смысла иметь отдельный маршрут для настольного компьютера или мобильного устройства (или других отзывчивых точек останова).

У меня есть примерStackblitz здесь , который показывает, как настроить SideNav (lt-md) и вкладки (gt-sm), используя динамическую маршрутизацию JSON / данные меню.

Вы не указываете, если ваш SideNav постоянно открытна мобильном телефоне, но даже если mat-sidenav является постоянным или временным и не отображается, ваш пользовательский интерфейс все равно будет отображаться в пределах 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>