각도 4 라우터 콘센트

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

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

사건에 대한

출처

2017-10-03 user2149578

당신이 '라는 이름의 라우터 출구'를 시도 할 수 있습니다. http://onehungrymind.com/named-router-outlets-in-angular-2/ – Skeptor

경로 이름 :'{ 경로 : '작성', 구성 요소 : ComposeMessageComponent, 출구 : '팝업' } 'Contact',''https://angular.io/guide/router – Gary

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

출처

2017-10-03 04:30:03

어떻게 든 뷰포트/해상도를 확인해야합니까? isMobile에 대한 부울 값을 할당하려면 || isTablet – user2149578

@ user2149578, 장치 인식을위한 라이브러리가 너무 많아서 이것을 확인하십시오. https://stackoverflow.com/questions/21757105/javascript-how-to-check-user-agent-for-mobile-tablet –

해답 :

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>

출처

2017-10-03 08:52:05 user2149578

각도 4 라우터 콘센트

답변

관련 문제