Komponenten Kommunikation über <Router-Ausgang>

Question

Ich habe eine Root-Komponente, die eine Änderung boolean hat und ich möchte abonnieren, dass sich ändernde boolean, mit einer Komponente innerhalb meiner <router-outlet>. Ich verstehe, dass ich einen geteilten bidirektionalen Dienst irgendeiner Art verwenden muss. Die Dokumente für Shared Services sind jedoch für mich nicht sehr sinnvoll. (Ich denke, ich kann meinen Kopf nicht um das Astronautebeispiel wickeln) here, jede Hilfe würde sehr geschätzt werden, hier ist ein bisschen Code, um zu zeigen, was ich versuche zu tun.

Wurzelkomponente

@Component({ 
    selector: 'my-app', 
    template: `<nav [state]="boolshow" (show)="changeValue($event)" ></nav> 
      <article><router-outlet></router-outlet></article> <-----component in router here 
      <footer></footer> 
      <h3>toggle state: {{boolshow}}</h3>`, 
    styleUrls: ['./Css/app.css'], 

    }) 
export class AppComponent { 
    boolshow: boolean;  <-----boolean that needs to be read 
    } 

Answer 1

Es ist genau, wie sie in diesen Angular2 Docs sagen:

• erstellen Sie einen Dienst mit einer beobachtbaren

• den gleichen Service in beiden Komponenten Injizieren

• Von einer Komponente, die Sie die Daten an den Dienst aktualisieren

• Von der anderen Komponente, die Sie die Daten aus dem Service lesen

Ex.

Der Service:

@Injectable() 
export class DataService { 
    private dataObs$ = new Subject(); 

    getData() { 
     return this.dataObs$; 
    } 

    updateData(data: boolean) { 
     this.dataObs$.next(data); 
    } 
} 

Die Komponenten:

@Component({ 
    selector: 'my-app', 
    template: `<div (click)="updateData(false)">Click t oupdate Data FALSE</div> 
      <div (click)="updateData(true)">Click to update Data TRUE</div> 
      <child></child> 
      ` 
}) 
export class AppComponent { 
    constructor(private dataService: DataService) {} 

    updateData(value: boolean) { 
     this.dataService.updateData(value); 
    } 
} 


@Component({ 
    selector: 'child', 
    template: `<div><p>data from Service HERE:</p><p style="color:red"> {{myData}}</p></div>` 
}) 
export class ChildComponent { 
    myData: boolean; 

    constructor(private dataService: DataService) {} 

    ngOnInit() { 
     this.dataService.getData().subscribe(data => { 
     this.myData = data; 
     }) 
    } 
} 

Stellen Sie sicher, den gleichen Service in den Komponenten (Singleton) injiziert haben:

@NgModule({ 
    imports:  [ BrowserModule, HttpModule ], 
    declarations: [ AppComponent, ChildComponent ], 
    providers: [ DataService ], 
    bootstrap: [ AppComponent ] 
}) 

http://plnkr.co/edit/nJVC36y5TIGoXEfTkIp9?p=preview

PS:

Ein vollständiges kann Arbeitsbeispiel HERE findet So funktioniert die Kommunikation über Service im Angular2, spielt es keine Rolle, ob die Komponente in einem Router-Ausgang über einen Router, es funktioniert überall.