Angular 2 Kind Mutter Kommunikation ohne Ereignis Emmiter

Question

Ich habe eine Zielseite. Ich muss eine Login-Komponente mit router.navigate ([./ app-login]) von der Zielseite laden. Nach dem erfolgreichen Anmelden muss die Dashboard-Komponente von der gleichen Zielseite aus mit router.navigate geladen werden. Wie kommuniziert man Login-Erfolg bei der Landung ohne Event-Emitter?

Mein Ziel ist es Login und Dashboard-Ansicht mit router.navigate sich von der Landing Ansicht zu laden. Ist es möglich oder Ist das ein richtiger Ansatz? Wenn es eine andere Möglichkeit ist bitte ..

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

Sie tun können, teilen, dass die Winkel Router. Es löst das Eltern/Kind-Problem.

Lets sagen, dass dies der Zielseite ist:

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

Siehe <router-outlet> Tag? Dort wird der geroutete Inhalt vom Routing geladen.

Siehe https://angular.io/docs/ts/latest/guide/router.html

In Ihrem Fall müssen Sie das sowohl den Landungsseiteninhalt und die Login-Komponente als Haupt-Lande-Seite des Kind konfigurieren.

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

Sie benötigen einen separaten Router für das Dashboard. Es ist gut, separate Router für jede Gruppe von Funktionen in Ihrer eckigen Anwendung zu haben. Und in diesem Beispiel DashboardRouter müssen Sie das CanActivate-Attribut auf einen AuthGuard setzen, den Sie implementieren müssen, um zu sagen, wie die Autorisierung Ihrer Anwendung funktioniert.

Siehe https://angular.io/docs/ts/latest/guide/router.html#guards

Ich denke, man den Punkt gekommen, nicht wahr?

Wie auch immer, eckig hat eine gute Dokumentation rund um Router und Wächter. Das ist der Weg, um Ihr Problem zu lösen.