ルーターアウトレットなしの角2レンダーページ

Question

スライドメニューとトップナビゲーションメニューを持つHTMLテンプレートがあり、レンダーメインパスページ用にブロックされています。このような ：

... 
<div class="content-wrapper"> 
    <router-outlet></router-outlet> 
</div> 
... 

しかし後に、私のログインページには、このコンテンツラッパーブロックにレンダリングします。 レンダリングのためのコードを書く方法LoginPageなしルート概要コンポーネント？私はあなたの質問を理解していた場合、あなたはトップナビゲーションを隠し、ログインしていないユーザーからのメニューをスライドさせたい

Answer 1

を助けることができます。私はここでそれについてブログ：

https://yakovfain.com/2016/07/20/angular-2-guarding-routes/

Answer 2

（トップナビゲーションバーとスライドメニューをレンダリングしていないため）。

これを行うための私の方法それらのコントロール/コンポーネントを<router-outlet></router-outlet>にレンダリングしているページから抜き出し、ユーザーがログインするまで非表示にします（おそらくユーザーが正常にログインしたことを示す認証サービスのブール値プロパティを介して）。

だから、これに似た何か：

<div class="content-wrapper"> 
    <top-nav *ngIf="authenticationService.userLoggedIn"></top-nav> 
    <slide-menu *ngIf="authenticationService.userLoggedIn"></slide-menu> 
    <router-outlet></router-outlet> 
</div> 

ログインページは、ルータのコンセントにレンダリングし、ユーザーが正常にログインすると、フラグがサービスに設定され、次のページがレンダリングされると、トップナビゲーション/スライドメニューがDOMに追加されます。

私は道オフベースだ場合、私に知らせて、多分私はまだルータ・コンセントをしてくださいますが、ユーザーがログインしない限り、レンダリングされてからの経路を防ぐために、ルータガードを使用

Answer 3

あなたの問題への正しい解決策は、周りのrouter-outlet行く、しかし、1つの余分な部品を使用していない（RootComponentそれを呼び出すことができます）router-outlet（RO1）とが、ナビゲーションとサイドメニューなし。 RO1では、コンポーネントNavMenuComponent（ナビゲーション、サイドメニュー、および独自のrouter-outlet RO2）をロードする必要があります。次に、子ルートを使用して、RO1のRootComponentにNavMenuComponent（ナビゲーションとサイドメニューを含む）またはLoginComponent（ナビとサイドメニューを持たない）のいずれかがロードされるようにすることができます。 RO2には、あなたが今持っているようにコンテンツが読み込まれます。 RootComponentを想定し

は、ルートは次のようになります、あなたのモジュール内のdeafultコンポーネントです：

const appRoutes: Routes = [ 

    { path: 'login', component: LoginComponent }, 
    { 
    path: '', 
    redirectTo: 'login', 
    pathMatch: 'full' 
    }, 

    { 
    path: 'app', component: NavMenuComponent, 
    children: [ 
     { path: 'youorldpath1', component: YourOld1Component }, //the path will /app/youroldpath1 instead of /youroldpath1 
     { path: 'youorldpath2', component: YourOld2Component, canActivate: [CanActivateViaAuthGuard] }, 
     { path: '**', component: ErrorComponent } 
    ] 
    }, 

    { path: '**', component: ErrorComponent } 

]; 

RootComponentだけ持つことができます。ここ

<router-outlet></router-outlet> 

さらに詳しい情報：https://angular.io/guide/router#child-routing-component