Rouerコンセント* ngIF

Question

私は次のアプリの構造を持っている：

master.html - 自分のアプリケーションコンポーネントのHTMLテンプレートの構造：

1. ：今

   <header> 
   <sidebar-right> 
   <sidebar-left> 
   
   <router-outlet> 
   
   <footer> 
   

   を..私は2つのシナリオを持っていますゲスト

2. ログインユーザ

ユーザーがゲストの場合は、サイドバーなしで<intro></intro>コンポーネントを表示する必要があります。ログインしたメンバーの場合は、これらのタグ（サイドバー、ヘッダーなど）をすべて表示します。

私はそれをどのようにすることができますか？ *ngIfの中にrouter outletを使用することができないので、私はそれを上で説明した方法で動作させる方法を知らない。

アイデア？

所望の出力アイデア：

<section *ngIf="loggedIn"> 
<header> 
    <sidebar-right> 
    <sidebar-left> 

    <router-outlet> 

    <footer> 
</section> 
<section *ngIf="!loggedIn"> 
<intro></intro> 
</section> 

Answer 1

ゲスト見ると二つの異なるルートでユーザービューを配置し、ルートが表示可能であるための条件となるルートガード、を追加します。これは、router-outletタグで動作した場合に* ngIfが持つことになります。

ログインしたユーザーに、アプリケーションコンポーネントのHTMLテンプレートと独自のコンポーネントを表示したい内容を移動します。ゲストユーザーのコンテンツに対しても同じ操作を行います。

あなたのルート設定内のルートとして、両方のコンポーネントを追加し、（あなたが作成する）輸入「認証ガードサービス」にログインしているユーザーのためのコンポーネントの「canActivate」の値を設定します。

import { AuthGuardService } from '../auth-guard.service'; 

const routes: Routes = [ 
    { path: 'guest', 
    component: guestComponent 
    }, 
    { path: 'logged-in-user', 
    component: loggedInUserComponent, 
    canActivate: [AuthGuardService] 
    } 
]; 

を

import { Injectable }  from '@angular/core'; 
import { CanActivate } from '@angular/router'; 

@Injectable() 
export class AuthGuardService implements CanActivate { 
    loggedIn: boolean; 

    canActivate() { 
    return this.loggedIn; 
    } 
} 

loggedInUserコンポーネントはloggedIn値がtrueの場合にのみナビゲートして表示できます。

あなたはこの、よりangular.ioサイト上のドキュメントを見つけることができます：あなたは2つの異なるルートを使用し、例えばログインしたときに、空のダミー部品を表示することができ https://angular.io/docs/ts/latest/guide/router.html#!#guards