각도 4 라우터 콘센트

Question

저는 4 각도가 아주 새롭습니다. 유감스럽게도 라우터 콘센트를 사용하여 불행히도 동적 콘텐트를 만들려고합니다. 두 번 사용할 수 없습니다. 태블릿, 모바일 및 데스크톱에 대한 다양한 시나리오가 있기 때문입니다. 어쩌면 너희들에게 조언을 해줄 수 있을까?

다른 콘센트를 지정할 수 있습니다.하지만 더 쉬운 방법이 있을까요?

내 코드 :

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

당신의 도움에 감사드립니다.

사건에 대한

Answer 1

, 당신은 단순히 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> 

사용하여이를 달성 할 수 있지만,이 <router-outlet></router-outlet>

의 필요가 없습니다 당신은 여전히 ​​여러 router-outlet,

를 체크 아웃을 사용하려는 경우 @Skeptor가 덧글에서 제안한대로 http://onehungrymind.com/named-router-outlets-in-angular-2/

Answer 2

해답 :

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>