トップレベルの複数の補助ルート

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ルータ・コンセントを使用すると、デフォルトの1を無視し、ルート「/ログイン」を持つことは可能ですか？どのルータがアクティブなのか知ることができるので、outsideルータコンセントだけがアクティブで、ngIfディレクティブでwrapperクラスを隠すことができます。

Answer 1

名前付きアウトレットルータを使用できます。しかし、あなたはこのほか、この

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

が、私は適切に通常のアプリケーションのレイアウトを隠すことができたとユーザに完全なログイン画面を提示する（まだログインしていない場合）。