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

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

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

Я не могу использовать именованные розетки, так как мои навигаторы используют одни и те же маршруты, плюс это испортило 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 }
];

angular router-outlet angular-flex-layout routing
person Necrolyte    schedule 04.02.2019    source источник
comment
Зачем нужно иметь две розетки роутера? Если вы можете это объяснить, я постараюсь помочь. Также обратите внимание, что ваш stackblitz не совпадает с кодом, который вы вставили здесь ... вы можете обновить, чтобы они были согласованными, пожалуйста.   -  person nclarx    schedule 05.02.2019

Ответы (1)


arrow_upward
0
arrow_downward

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

У меня есть пример 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>
person Splaktar    schedule 08.02.2019