angulaire: utiliser le même deux fois dans un composant

Si vous souhaitez utiliser plusieurs prises dans le même modèle de composant, vous devez utiliser points de vente nommés . Mais ils sont destinés à fonctionner avec des routes secondaires et non avec des routes principales ... Je ne sais pas quel est votre cas d'utilisation pour avoir deux points de vente, mais si vous allez afficher un contenu différent à partir du mobile et du bureau, vous devriez plutôt envisager de créez deux applications différentes, mais ce n'est qu'une recommandation!

Donc, si vous souhaitez utiliser des points de vente nommés, vous devez donner à chaque point de vente un nom, comme ceci:

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

Ensuite, vous pouvez rediriger vos itinéraires vers une prise spécifique sur votre fichier de routage comme ceci:

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

Si vous redirigez vers ces itinéraires via un routerLink code>, alors vous pouvez rediriger à partir du modèle comme ceci:

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

EDIT

Je viens de voir votre code sur StackBlitz et le problème est que vous affichez le modèle de sortie du routeur deux fois dans le modèle. Vous devez afficher l'un ou l'autre en fonction d'une condition. J'ai modifié votre StackBlitz ici a > avec une variable qui afficherait une ou une autre prise de routeur en fonction d'une condition (vous pouvez vérifier la taille de l'écran ou ce que vous voulez).

Mais en examinant votre code, je ne comprends pas pourquoi vous en avez besoin de deux sorties du routeur ... Si vous souhaitez uniquement déclencher une classe sur la div parent de la sortie du routeur, vous pouvez simplement utiliser ngClass pour utiliser une classe ou une autre en fonction de la taille de l'écran.

Je pense avoir trouvé une autre solution en écoutant Router-Events:

https://stackblitz.com/edit/router-outlet-twice -avec-événements

Dans ce stackblitz, j'ai en fait deux modèles utilisant simultanément la sortie du routeur. Est-ce une solution de contournement valide?

En essayant de trouver une solution à ce problème, je me suis retrouvé avec:

HTML

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')
  }
}

TS

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

J'ai essayé quelque chose comme suit et m'aide à afficher

HTML

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

Component.ts

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