Angular2 + : 부모 라우터 아웃렛을 다른 하위 구성 요소에 다르게 적용하는 방법

Question

내 각형 응용 프로그램에서는 루트 app.component과 여러 하위 구성 요소가 있습니다. 내 app.component.html은 단순히 다음과 같습니다 : 나를 위해

<app-top-navigation></app-top-navigation> 

<div class="container-fluid"> 
    <router-outlet></router-outlet> 
</div> 

문제는 내 모든 하위 페이지가 <div class="container-fluid"로 둘러싸여하려는하지만 home.component에 대한 예외와 함께. 내 home.component.html에 상자에 넣기를 원하지 않습니다. .container-fluid은 상자에 넣습니다.

이것을 수행하는 각도 방법이 있습니까?

P. 여기 내 단순화 된 예제에서는 home.component에 특수 CSS를 적용 할 수 있지만 더 큰 프로젝트 였고이 예외적 인 처리가 필요한 몇 가지 하위 구성 요소가 있다고 가정합니다.

Answer 1

가정용 부품은 이와 같이 간단 할 수 있습니다. 집에 별도의 글로벌 경로가 설정되어 있는지 확인하십시오.

componentRoutes: Routes = [ 
{ 
    path: '/home', 
    component: HomeComponent 
},{ 
    path: '', 
    component: MainComponent 
}]; 

또한 홈 경로 '에를 유지할 수

당신은

홈 구성 요소 템플릿에 필요한 경우 - home.html을

<app-top-navigation></app-top-navigation> 

<div class="home" > 
    # Home page content 
</div>