최상위 레벨의 복수 보조 경로

Question

in this post 상위 경로가 아닌 보조 경로를 구성합니다. 나는 반대쪽을 구성하고 싶습니다. 최상위 레벨에있는 여러 경로입니다. 내 주요 목표는 일반 응용 프로그램 페이지 상단에 완전한 오버레이 (로그인 페이지)를 표시하는 것입니다.

내가 다음 HTML을 상상해 :

<div class="wrapper" *ngIf="mainRouterOutlet"> 
    <div header></div> 
    <div sidebar></div> 
    <div class="content-wrapper"> 
     <router-outlet></router-outlet> 
    </div> 
    <div footer></div> 
</div> 
<div *ngIf="!mainRouterOutlet"> 
<router-outlet name="outside"></router-outlet> 
</div> 

는 outside 라우터 콘센트를 사용하고 기본을 무시 경로 '/ 로그인'을 가질 수 있습니까? 어떤 라우터가 활성 상태인지 알 수 있습니까? 따라서 ngIf 지시문을 사용하여 wrapper 클래스를 숨길 수 있으며 outside 라우터 콘센트 만 활성화됩니다.

Answer 1

당신은 named outlet-router를 사용할 수 있습니다. 그러나이 외에이

A template may hold exactly one unnamed . The router supports multiple named outlets, a feature we'll cover in future.

을 고려해야합니다, 당신은 *ngIf를 사용하는 경우

{ path: 'site1', component: Site1Component }, 
    { path: 'site2', component: Site2Component, outlet: 'outlet1' }, 
    { path: 'site3', component: Site3Component, outlet: 'outlet2' } 


<router-outlet></router-outlet> 
<router-outlet name="route1"></router-outlet> 
<router-outlet name="route2"></router-outlet> 

Answer 2

하지만 부분적으로 구현되는 것을 명심 지금 사용할 수 있습니다, 그것은 DOM에서 완전히 router-outlet을 숨 깁니다 . 라우터가 여전히 작동 할 수 있도록 [hidden]를 사용하는 경우 내가

Error: Uncaught (in promise): Error: Cannot find primary outlet to load '...Component'

있어, 그냥 요소의 가시성을 설정합니다.

<div class="wrapper" [hidden]="isLogin"> 
    <div header></div> 
    <div sidebar></div> 
    <div class="content-wrapper"> 
     <router-outlet></router-outlet> 
    </div> 
    <div footer></div> 
</div> 
<div [hidden]="!isLogin"> 
    <router-outlet name="outside"></router-outlet> 
</div> 

정상 라우터 구성 : :이 HTML을 사용 결국

그냥 isLogin 속성을 전환하여

const appRoutes: Routes = [ 
    { path: 'success', component: SuccessComponent }, // using the default router-outlet 
    { path: 'login', component: LoginComponent, outlet: 'outside' }, // using the outside router-outlet 
]; 

, 나는 제대로 정상적인 응용 프로그램 레이아웃을 숨길 수 있었고, 사용자에게 완전한 로그인 화면을 표시합니다 (아직 로그인하지 않은 경우).