bileşenleri <router-outlet> aracılığıyla iletişim kuruyor

Question

Değişen bir boolean'a sahip bir kök bileşenim var ve bunumaralı telefonumdaki bir bileşenle bu değişen boole öğesine abone olmak istiyorum. Anlıyorum, bir tür paylaşımlı çift yönlü servis kullanmam gerekiyor. Ancak, paylaşılan hizmetler için dokümanlar sadece bana çok fazla anlam ifade etmiyor. (Sanırım kafamı astronot örneğinin etrafına dolamıyorum) here, herhangi bir yardım büyük bir memnuniyetle karşılanacak, burada yapmaya çalıştığım şeyi göstermek için biraz kod var.

kök bileşeni

@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

onlar Angular2 Docs söylemek ne kadar da tam olarak:

• hem bileşenler

  aynı hizmeti enjekte bir gözlemlenebilir

• bir hizmet oluştur

• bir bileşeni itibaren Hizmet

Ör veri okumak diğer bileşeni itibaren Service

verileri günceller.

Hizmeti:

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

    getData() { 
     return this.dataObs$; 
    } 

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

Bileşenleri:

@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; 
     }) 
    } 
} 

bileşenleri enjekte aynı hizmeti olduğundan emin olun (Singleton):

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

Tam çalışma örneği HERE bulunabilir: http://plnkr.co/edit/nJVC36y5TIGoXEfTkIp9?p=preview

Not: sizin bileşen bir yönlendirici üzerinden bir yönlendirici-çıkış içinde olup olmadığını Hizmet aracılığıyla iletişim Angular2 nasıl çalıştığını budur, hiç önemli değil, çalışıyor her yerde.