Angular2 - Übertragen von Daten außerhalb Router-Steckdose zu einer anderen Komponente

Question

Bin neu zu Angular2, aber ich habe bereits 30 + Komponente und Dienstleistungen und verwendet Input, Output, ChangeDetectorRef, Pipes. So ziemlich viel über Angular2 inzwischen wissen. Meine app.component.ts sieht aus wie diese

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'soc', 
    template: ` 
     <header-block></header-block> 
     <router-outlet></router-outlet> 
    `, 
}) 
export class AppComponent { } 

Als ich meinen Kopfblock in jeder Seite müssen, damit ich es außerhalb Router-Block hinzugefügt, damit ich es nicht überall hinzufügen. Jetzt ist das Problem, das ich habe, den Wert der Variable im Kopfzeile-Block zu ändern, nachdem ich eine Handlung im Blick innerhalb des Fräserausgangs getan habe.

Zum Beispiel habe ich Menü, das für den Benutzer nur nach dem Login sichtbar sein wird.

{{ user_is_logged }} 
<ul class="nav navbar-nav navbar-right" *ngIf="user_is_logged == '1'"> 
    <li><a href="#" (click)="logout($event)">Logout</a></li> 
</ul> 

user_is_logged ist eine Variable, deren Wert am von localstorage immer in header.block.component.ts

user_is_logged:string = localStorage.getItem("logged"); 

Wenn der Benutzer nicht in dh user_is_logged ist nicht definiert für Hause angemeldet ist component.ts (wo login logic geschrieben wird), bitte ich den Benutzer, sich einzuloggen und nach erfolgreicher Anmeldung den Wert user_is_logged variabel und auch zu aktualisieren die localstorage Wert der Variablen zu aktualisieren und dann Änderungen Triggerung erfassen, indem der ChangeDetectionRef (cdr) und anschließend auf Benutzerprofil Routing

this.user_is_logged = "1"; 
localStorage.setItem('logged', '1'); 
this.cdr.detectChanges(); 
this.router.navigate(['u/'+user_id']); //user_id is from login response from server 

Das Problem ist, wenn ich das Benutzerprofil nach erfolgreicher Anmeldung den Wert {{user_is_logged erreichen }} wird niemals aktualisiert, auch wenn die Variable selbst verwendet wird oder der Wert von localStorage verwendet wird oder sogar die Erkennung angefordert wird.

Ist es möglich, dies auf diese Weise zu tun oder muss ich Header-Block zu jeder Seite separat hinzufügen? Bitte fragen Sie nach weiteren Informationen, wenn ich etwas verpasst habe.

---

EDIT ============>

So nach dem Durch Thema gehen, BehaviourSubject, AsyncSubject, ReplaySubject, Observable und was nicht, ich konnte einfach nicht bekommen arbeiten. Dies ist der letzte Code, den ich geschrieben habe:

home.page.component.ts (wo Login passiert und hat das Ereignis zu emittieren)

import { HomeService } from '../services/home.service'; 
// No observable or subject imported here. 

login() { 
    // Sending status 1 to HomeService 
    this.HomeService.changeStatus("1"); 
} 

home.service.ts (die importiert durch beide Komponente)

import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
// I imported Subject, BehaviourSubject, Observables but cant get it to work 

export class HomeService { 

    // This looked more reliable than Subject so used this; init with value "0" 
    public subjectStream = new BehaviorSubject<string>('0'); 


    constructor(
    ){ 
     this.subjectStream.subscribe(value => { 
      // Successfully logs value "1" sent by changeStatus below 
      console.log(value); 
     }); 
    } 


    changeStatus(value: any){ 

     // Gives value "1" when called by home.page.component.ts 
     console.log(value); 

     // Looks correct because it successfully sent value to construct 
     this.subjectStream.next(value); 

    } 

} 

header.block.component.ts

import { HomeService } from '../services/home.service'; 
// No observable or subject imported here also. 


constructor(
){ 
    this.HomeService.subjectStream.subscribe(value => { 
     // Logs value "0" at beginning but never logs value "1" 
     console.log(value); 
    }); 
} 

Mein Log

// logged by constructor when imported by header.block.component 
home.service.ts:31     0 

// logged by constructor of header.block.component itself 
header.block.component.ts:25  0 

// logged by constructor when imported by home.page.component (I think) 
home.service.ts:31     0 

// =================== 
// Login called here 
// =================== 

// logged by changeStatus after login after called by home.component 
home.service.ts:36     1 

// logged by constructor after getting event from changeStatus 
home.service.ts:31     1 

Was bin ich in header.block.component.ts fehlt? Wie der Wert erfolgreich innerhalb der home.service.ts aktualisiert wird, aber nie in den Header geht.

Answer 1

Wenn Sie HomeService in Homepage und Header zur Verfügung stellen, erhalten Sie 2 Instanzen von HomeService. Wenn Sie einen Dienst freigeben möchten, geben Sie ihn nur einmal für die übergeordnete Komponente an. Wenn Sie eine einzelne Instanz mit Ihrer gesamten Anwendung teilen möchten, stellen Sie sie nur unter von AppModule

Answer 2

Wurde gebeten, dies zu veröffentlichen, ist es ein blanker Event/Betreff Service, um loszulegen. Ich benutze "notifier/notes/note", damit die Nomenklatur nicht mit "Ereignissen" und anderen Framework-API-Mechanismen verwechselt wird.

// Constant of named "notes" analogous to named events. 
// I always found it easier to have one event type with a "name", 
// rather than creating a specific typed event for every action. 
const Notes = { 
    HEADER_BUTTON_CLICKED : 'header_button_clicked' 
}; 

// Any component that wants to send data creates a new "Note" to send. 
// Just makes sure you know what all callbacks are getting. 
class Note { 
    constructor (name, data) { 
     this.name = name; // Should be from your Notes constant. 
     this.data = data; // Can be anything at all. 
    } 
} 

// You inject this service into any component that needs it. 
class NotifierService { 

    constructor() { 

     let Rx = require ('rx'); 
     // We'll use Subject here. 
     this.subject = new Rx.Subject (); 
    } 

    // You only subscribe if you want to hear notes. 
    subscribe (callback) { 
     // Subscribing component feeds in a callback. 
     // The return of this can be used to unsubscribe as well. 
     return this.subject.subscribe (b => callback (b)); 
    } 

    // Any component with access to this service can just create a note 
    // and send it to all subscribers to this service. 
    sendNote (note) { 
     // Component uses the service to emit a "note" with a 
     // named event and a payload. All subscribers hear it in the 
     // callbacks they subscribed with, and can filter on the name 
     // in the "note" to make sure it's the event they care about. 
     // This is pretty naive but should give the idea. 
     this.subject.onNext (note); 
    } 
} 
export { NotifierService } // Service to inject 
export { Note } // A useful type to send out to subscribers 
export { Notes } // Constant of event/note names. 

Typische Anwendungen:

import { NotifierService, Notes, Note } from './notifier.service'; 
... // inject in your constructor either TS or ES6 style... 

// I want to hear notes 
this.noteSvc.subscribe (b => this.myCallback (b)); 

// I want to send a note 
this.noteSvc.sendNote (new Note (Notes.HEADER_BUTTON_CLICKED, { btnName : 'Home' }); 

    // In the callback 
    myCallback (note) { 
    if (note.name === Notes.HEADER_BUTTON_CLICKED) { 
     console.log (note.data); // whatever the payload is 
    } 
    }