Komponenten aktualisiert werden, wenn Login

Question

ich eine sidenav Komponente haben, dass, wenn Sie sich nicht anmelden, ermöglicht es Ihnen eingeloggt sein, und es zeigt ein Menü, wenn der Benutzer bereits in.

angemeldet ist

Die Sache ist dass ich in anderen Komponenten ein weiteres Login "Button" hinzufügen möchte, dass sie vielleicht keine direkten Kinder dieser sidenav Komponente sind.

Als Beispiel app.component.html:

<md-sidenav-container class="example-sidenav-fab-container"> 
    <md-sidenav #sidenav mode="side" class="app-sidenav" opened="false"> 
     <app-profile-sidenav></app-profile-sidenav> 
    </md-sidenav> 

    <md-toolbar #header id="header" class="header" color="primary"> 
     <i (click)="sidenav.toggle()" class="material-icons app-toolbar-menu clickable">menu</i> 
     <span>App</span> 
    </md-toolbar> 

    <div class="app-content"> 
     <router-outlet></router-outlet> 
    </div> 

</md-sidenav-container> 

Und einer der Komponente, die ich die Log-in-Taste angezeigt werden soll ist HomeComponent.

Aber, wenn ich diese Schaltfläche in der HomeComponent hinzufügen, und ich mich einloggen, in meiner Sitenav-Komponente kann ich immer noch die Vorlage der nicht authentifiziert werden.

Irgendwie habe ich den Rest der Komponenten sagen, dass ich angemeldet bin.

Normalerweise mit @Output() Ich mache es, aber in diesem Fall sind die Komponenten nicht in der gleichen Vorlage.

Irgendwelche Ideen, wie kann ich es tun?

Answer 1

Die empfohlene Art der Kommunikation zwischen Komponenten, die nicht direkt miteinander verwandt sind (z. B. Eltern-Kind- oder Geschwister-Komponenten), erfolgt über Dienste.

Sie können mehr Informationen über sie hier finden: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Eine andere Möglichkeit ist eine Art zentralen Speicher zu verwenden (zB NGRX/store https://github.com/ngrx/store), die abgefragt werden können oder für Änderungen abonniert (wie Login, usw.)