2017-07-04 6 views
2

に私は角度4アプリケーションに取り組んでいますし、私はこれが私ですルータのコンセントの負荷login.page.ts負荷は、ページのルータ、アウトレット外の角度4

をしたいですhome.component.htmlファイル

<div class="container"> 
    <top-nav-bar></top-nav-bar> 
    <lett-nav-bar></lett-nav-bar> 
    <router-outlet></router-outlet> 
</div> 

ルートのコンフィグ

const MAINMENU_ROUTES: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { path: '', redirectTo: 'home', pathMatch: 'full'}, 
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard]} 
]; 

これで、ルータのログインページを読み込むことができますが、ルータの出口に来る前にログインページをフルスクリーンで読み込みたいのですが。

+0

トップナビゲーションバーと左側ナビゲーションバーと同じように使用しないでください。 – TheUnreal

答えて

3

ルータのアウトレットなしでページにルーティングすることはできません。あなたが何を記述しているかに基づいて、App Componentのように、より高いレベルで別のルータのアウトレットが必要なように思えます。このような何か:

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

次に、あなたのルートログインページとこのルータコンセントに自宅のコンポーネントをすることができます。

あなたのルート設定は次のようになります:ログインページが無いのnavバーがフルスクリーンで表示されますので、

{ path: 'login', component: LoginComponent }, 
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard], 
     children: [ 
     { path: 'child1', component: Child1Component }, 
     { path: 'child2', component: Child2Component } 
     ] 
    } 

ログインし、ホームのルートはその後、アプリケーションコンポーネントのルータのコンセントに表示されます。そして、child1とchild2のルートは、ホームコンポーネントのルーターのアウトレットに表示されます。

関連する問題