Wie hören Sie Ereignisse als Teil der Routerkonfiguration?

Question

Ich habe eine App mit einer Login-Komponente und einer Home-Komponente und wenn der Benutzer sich angemeldet hat, möchte ich zur Home-Komponente navigieren. Ich möchte, dass die Login-Komponente nach der Authentifizierung ein "Login erfolgreich" -Ereignis ausgibt und die App-Komponente diese abhört und entsprechend navigiert. Ich kann jedoch nicht sehen, wie der Ereignis-Listener in der Rooting-Konfiguration hinzugefügt wird.

Die meisten der Beispiele, die ich gesehen habe, betreffen das Navigieren innerhalb der Login-Komponente, aber dies scheint die Idee von eigenständigen Komponenten zu zerstören, da die Login-Komponente sowohl die Home-Komponente als auch das Rooten kennen muss Struktur der App

Ich möchte die Ausgabe der Login-Komponente verwenden, aber ich kann nicht sehen, wie dies beim Navigieren zum Login mit Router-Konfiguration zu tun.

<login (loginSuccess)="handleLoginSuccess($event)"></login>

Es gab auch eine längere Diskussion über Github (https://github.com/angular/router/issues/185), die Wurzeln, die Geschwister schlägt die Navigation wird nicht empfohlen.

Answer 1

Unter der Annahme, dass die Ausgabe der Anmeldekomponente die Autorisierungsdaten sind, können Sie das Verhalten mit angular guard behandeln.

Answer 2

Sie müssen möglicherweise einen shared service verwenden, um zwischen den Home- und Login-Komponenten zu kommunizieren, siehe this Antwort.

Wenn das Ziel nur darin besteht, die Anmeldekomponente erneut zu verwenden, können Sie die URL, an die Sie umleiten möchten, z. '/ home' über Routendaten.

In der Routendefinition:

... 
{ 
    path: 'login', 
    component: LoginComponent, 
    data: { 
    onLoginOk: '/home' 
    } 
} 

Und in LoginComponent ..

export class LoginComponent implements OnInit {  

onLoginOk: string; 

constructor(private route: ActivatedRoute) { } 

    ngOnInit() { 
    this.route.data.forEach((data: { onLoginOk: string }) => { 
     this.onLoginOk= data.onLoginOk; 
    }); 
    } 
... 

So ist das LoginComponent weiß nichts von der Heimat Komponente, er weiß nur, dass, wenn es erfolgreich anmeldet, es navigiert zu einer URL.