Event Emmiterを使用せずにAngular 2の子どもと親のコミュニケーション

Question

私はリンク先ページを持っています。ランディングページからrouter.navigate（[./ app-login]）を使用してログインコンポーネントを読み込む必要があります。ログインが成功したら、同じランディングページからrouter.navigateを使用してダッシュボードコンポーネントをロードする必要があります。どのようにイベントのエミッタなしで着陸にログインの成功を伝える？

私の目的は、landingビュー自体からrouter.navigateを使用してログインとダッシュボードビューを読み込むことです。それは可能か、これは正しいアプローチですか？ ..あなたは角ルータを使用していることを行うことができます

landing.component.ts

ngOnInit() { 
    //directly navigate to login if token expired/first login 
    this.router.navigate(['/app-login']); 
} 

loadDashdoard(){ 
    //load dashboard on success login 
    this.router.navigate(['/app-dashboard']); 
} 

Answer 1

を共有してください他の方法がある場合。それは親子問題を解決します。

<h1>My Landing Page</h1> 
    <nav> 
    <a routerLink="/login" routerLinkActive="active">Login</a> 
    </nav> 
    <router-outlet>Your landing page/Login content will go here</router-outlet> 

<router-outlet>タグを参照してください：

が、これはあなたのランディングページであるとしましょうか？ルーティングされたコンテンツがルーティングによってロードされます。

はあなたのメインのランディングページの子としてランディングページのコンテンツの両方と、ログインコンポーネントを設定する必要があり、あなたのケースでは

https://angular.io/docs/ts/latest/guide/router.htmlを参照してください。

const landingPageRoutes: Routes = [ 
    { 
    path: 'landing-page', 
    component: LandingPageComponent, 
    children: [ 
     { 
     path: '', 
     component: LandingPageContentComponent    
     }, 
     { 
     path: 'login', 
     component: LoginComponent    
     }, 
    ] 
    } 
]; 

ダッシュボード用に別のルータが必要です。角型アプリケーションの各機能グループごとに別々のルータを用意することは良いことです。そして、これでDashboardRouterと言うと、CanActivate属性をAuthGuardに設定する必要があります。この属性は、アプリケーションの認証の仕組みを説明するために実装する必要があります。

は、私はあなたが正しい、ポイントを得たと思いますhttps://angular.io/docs/ts/latest/guide/router.html#guards

参照してください？

とにかく、角度は、ルータとガードの周りの良い文書を持っています。それがあなたの問題を解決するための道です。