Angular: использование одного и того же <router-outlet> дважды в одном компоненте

Если вы хотите использовать несколько торговых точек в одном и том же шаблоне компонента, вам нужно использовать именованные торговые точки. Но они предназначены для работы с вторичными маршрутами, а не с первичными... Я не знаю, в каком случае вы используете два выхода, но если вы собираетесь отображать разный контент с мобильного и рабочего стола, вместо этого вам следует рассмотреть возможность создайте два разных приложения, но это только рекомендация!

Итак, если вы хотите использовать именованные розетки, вам нужно дать каждой розетке имя, например:

<div class = "mobile-only">
  <div>some special content for mobile version</div>
  <router-outlet name = "mobile-content"></router-outlet>
</div>

<div class = "desktop-only">
  <div>some special content for desktop version</div>
  <router-outlet name = "desktop-content"></router-outlet>
</div>

Затем вы можете перенаправить свои маршруты к определенному выходу в вашем файле маршрутизации следующим образом:

{
  path: 'mobile',
  component: MobileContentComponent,
  outlet: 'mobile-content'
},
{
  path: 'desktop',
  component: DesktopContentComponent,
  outlet: 'desktop-content'
}

Если вы перенаправляете на эти маршруты через директиву routerLink, вы можете перенаправить из шаблона следующим образом:

<a [routerLink] = "[{ outlets: { mobile-content: ['mobile'] } }]">Mobile Content</a>
<a [routerLink] = "[{ outlets: { desktop-content: ['desktop'] } }]">Desktop Content</a>

РЕДАКТИРОВАТЬ

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

Но, просматривая ваш код, я не понимаю, зачем вам две розетки маршрутизатора... Если вы хотите запустить класс только в родительском div розетки маршрутизатора, вы можете просто использовать ngClass для использования того или иного класса на основе экрана размер.

Я думаю, что нашел другое решение, слушая Router-Events:

https://stackblitz.com/edit/router-outlet-twice-with-events

В этом stackblitz у меня на самом деле есть два шаблона, одновременно использующих router-outlet. Это допустимый обходной путь?

Пытаясь найти работу для этого, я закончил с:

HTML

<div id = "mobile">
 <router-outlet *ngIf = "isMobile"></router-outlet>
</div>
<div id = "desktop">
 <router-outlet *ngIf = "isDesktop"></router-outlet>
</div>

ТС

export class ExampleComponent implements AfterViewInit {

  private initied: boolean
  constructor (
    private cdref: ChangeDetectorRef
  ) { }

  ngAfterViewInit (): void {
    this.initied = true
    this.cdref.detectChanges()
  }

  get isDesktop (): boolean {
    if (!this.initied) { return false }
    return this.checkHidden('router-mobile')
  }

  get isMobile (): boolean {
    if (!this.initied) { return false }
    return this.checkHidden('router-desktop')
  }

  private checkHidden (id: string): boolean {
    return (document.getElementById(id).getAttribute('style') as string).includes('display: none')
  }
}

Я пробовал что-то вроде следующего и помогает мне показать взаимоисключающие

HTML

<div id = "mobile">
 <router-outlet *ngIf = "!getIfMobile"></router-outlet>
</div>
<div id = "desktop">
 <router-outlet *ngIf = "getIfMobile"></router-outlet>
</div>

Компонент.ts

get getIfMobile() {
    return window.innerWidth < 720;
}