Wie übermittele ich Daten von der Unteransicht zur Hauptansicht in Angular 2?

Question

Ich habe zwei Schaltflächen in der Hauptansicht: Login und Logout. Zunächst nur Login-Button wird angezeigt:

...

<button type="button" routerLink="/login" routerLinkActive="active" class="btn btn-info">Login</button> 
<button type="button" routerLink="/showlist" routerLinkActive="active" class="btn btn-info" (click)="logout()">Logout</button> 

<router-outlet></router-outlet> 

Login-Button wird eine Unteransicht angezeigt werden, sobald Benutzer dort authentifiziert ist, möchte ich das Ergebnis zu übergeben zurück zur Hauptansicht, wenn der Benutzer ist authentifiziert, ich möchte den 'Login' Button ausblenden und den 'Logout' Button anzeigen.

Wie kann ich die Daten von einer Unteransicht über 'Router-Ausgang' zurück zur Hauptansicht leiten?

Answer 1

Sie möchten einen Dienst verwenden, um Informationen zwischen Komponenten auszutauschen. Sobald der Benutzer authentifiziert wurde, sollten Sie in diesem Dienst eine Eigenschaft festlegen, die angibt, dass der Benutzer authentifiziert ist.

Sobald Sie das getan haben, können Sie diesen Dienst referenzieren, um zu bestimmen, ob Sie etwas verstecken sollten, indem Sie * ngIf verwenden.

Here ist eine Frage beantwortet, die Ihren ähnlich ist.

Answer 2

So blenden Sie die Taste Sie die * ngif Struktur Direktive wie verwenden:

<button *ngIf="!loggedIn" type="button" routerLink="/login" routerLinkActive="active" class="btn btn-info">Login</button> 
<button *ngIf="loggedIn" type="button" routerLink="/showlist" routerLinkActive="active" class="btn btn-info" (click)="logout()">Logout</button> 

Die LoggedIn ein boolean in Ihrer Komponente mit der Hauptansicht in Verbindung gebracht werden sollte. Ich nehme an, dass Sie mit dem Begriff Hauptansicht und Unteransicht meinen, dass Sie jeweils eine Elternkomponente und eine Kindkomponente (für die Authentifizierung) haben. Wenn dies der Fall ist, beziehen Sie sich auf Component Interaction und wählen Sie die Kommunikation, die Ihnen am besten passt.