Angular 4 sorties-routeur

Question

Je suis assez nouveau dans Angular 4. J'essaie d'utiliser sortie routeur pour créer du contenu dynamique malheureusement, je ne suis pas capable de l'utiliser deux fois, car j'ai différents scénarios pour les tablettes, mobiles et ordinateurs de bureau. Peut-être que vous avez des conseils?

Je pense que je peux attribuer différents points de ventemais peut-être qu'il y a un moyen plus facile?

Mon code:

<div class="ui two column stackable grid"> 

    <app-navigation class="three wide column computer mobile only webso-navigation"></app-navigation> 
    <app-navigation class="four wide column tablet only webso-navigation"></app-navigation> 
    <div class="thirteen wide column computer mobile only webso-content"> 
     <router-outlet></router-outlet> 
    </div> 
    <div class="twelve wide column tablet only webso-content"> 
     <router-outlet></router-outlet> 
    </div> 



</div> 

Merci pour votre aide.

Answer 1

Pour votre cas, il n'y a pas besoin de deux <router-outlet></router-outlet>

Vous pouvez simplement y parvenir en utilisant ngClass

// In Component File 
isMobile : boolean; 
isTablet : boolean; 

// In Template File 
<div [ngClass]="{'thirteen wide column computer mobile only webso-content' : isMobile , 
       'twelve wide column tablet only webso-content' : isTablet }" > 
     <router-outlet></router-outlet> 
</div> 

Mais si vous voulez continuer à utiliser plusieurs router-outlet,

Commander la lien comme @Skeptor suggéré dans le commentaire http://onehungrymind.com/named-router-outlets-in-angular-2/

Answer 2

Résolu:

App.component.ts

export class AppComponent implements OnInit { 


    title = 'app'; 
    innerWidth; 

    isTablet : boolean = false; 


    ngOnInit() { 
    this.innerWidth = window.innerWidth; 

    this.innerWidth <= 600 || this.innerWidth >= 1024 ? this.isTablet = false : this.isTablet = true; 
    } 

    @HostListener('window:resize', ['$event']) 
    onResize(event) { 
    this.innerWidth = window.innerWidth; 

    this.innerWidth <= 600 || this.innerWidth >= 1024 ? this.isTablet = false : this.isTablet = true; 

    } 

App.component.html

<div [ngClass]="isTablet ? 'twelve wide column tablet only webso-content' 
           : 'thirteen wide column computer mobile only webso-content'"> 
     <router-outlet></router-outlet> 
    </div>