Bir dizgiyi Angular 2

Question

'daki bir hizmetten geçirin ve güncelleyin Hizmetin içindeki bir dizenin değerini alıp güncelleştiren ve onu bir bileşende görüntüleyen çok basit bir uygulama aracılığıyla hizmetleri daha iyi anlamaya çalışıyorum.

import {Injectable} from 'angular2/core'; 

@Injectable() 
export class SharedService { 
    dataString: string; 

    insertData(data) { 
    this.dataString = data 
    } 
} 

İşte ana 'uygulama' bileşeni var: Burada

hizmettir

import {Component}  from 'angular2/core'; 
import {OtherComponent} from './other'; 
import {SharedService} from'./shared.service'; 

@Component({ 
    selector: 'my-app', 
    providers: [SharedService], 
    directives: [OtherComponent], 
    template: ` 
    <input type="text" #someValue> 
    <button (click)="setSharedValue(someValue.value)">Change value in shared service</button> 
    <br><br> 
    <other></other> 
    ` 
}) 
export class AppComponent { 
    constructor(private _sharedService: SharedService){} 

    setSharedValue(value){ 
    this._sharedService.insertData(value); 
    } 

} 

... ve burada 'öteki' bileşeni var:

import {Component, OnInit} from 'angular2/core'; 
import {SharedService} from './shared.service'; 

@Component({ 
    selector : "other", 
    template : ` 
    I'm the other component. The shared data is: 
    <p>{{data}}</p> 
    `, 
}) 
export class OtherComponent implements OnInit{ 
    data: string; 
    constructor(private _sharedService: SharedService){} 
    ngOnInit() { 
    this.data = this._sharedService.dataString; 
    } 
} 

Here's a plunkr.

Girdiye metin eklendiğinde ve tuşa basıldığında, servis verilerinin alınması ve ayarlanması için sadece 'diğer' bileşeninde girilen değeri görüntülemek istiyorum. Ancak, sadece sessizce başarısız oluyor.

Neyi yanlış yaptığımı açıklayan var mı?

Teşekkür

Answer 1

Sizin kodunuz doğru, sadece sizin other bileşenidir, hizmeti güncellediğinizi bilmiyorsunuz, bu nedenle yeni bir Veri isteğinde bulunmayacaktır. Bu durumda Angular2 için Gözlenebilirler kullanıyor:

Hizmetleri:

@Injectable() 
export class SharedService { 
    // Observable string source 
    private dataStringSource = new Subject<string>(); 

    // Observable string stream 
    dataString$ = this.dataStringSource.asObservable(); 

    // Service message commands 
    insertData(data: string) { 
    this.dataStringSource.next(data) 
    } 
} 

Ana Bileşen

@Component({ 
    selector: 'my-app', 
    providers: [SharedService], 
    directives: [OtherComponent], 
    template: ` 
    <input type="text" #someValue> 
    <button (click)="setSharedValue(someValue.value)">Change value in shared service</button> 
    <br><br> 
    <other></other> 
    ` 
}) 
export class AppComponent { 
    constructor(private _sharedService: SharedService){} 

    setSharedValue(value){ 
    this._sharedService.insertData(value); 
    } 
} 

Diğer Bileşen

@Component({ 
    selector : "other", 
    template : ` 
    I'm the other component. The shared data is: 
    <p>{{data}}</p> 
    `, 
}) 
export class OtherComponent implements OnInit{ 
    data: string; 
    constructor(private _sharedService: SharedService){} 

    ngOnInit() { 
    this._sharedService.dataString$.subscribe(
     data => { 
     this.data = data; 
     }); 
    } 
} 

güncellenmiş plunkerburada bulunabilir: Angular2 bileşenler arasındaki https://plnkr.co/edit/neM6EdYYUkGkRpF0fKGS?p=preview

Etkileşim burada bulunabilir: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Answer 2

Ben sadece gözlenebilirleri kullanmaktır son adımı eksik, doğru olanı yaptığını düşünüyorum. Umarım bu enter link description here yardım edebilir.

Answer 3

Muhtemelen kullanarak gözlenebilirlerin yapılacak doğru şey olduğunu ama çok alternatif yaklaşım vardır. Herhangi bir bileşene providers: [ SharedService ] eklemeyin, aksi takdirde bileşenler farklı bir örnek alır. Sadece bir kez bootstrap() 'da sağlayın. Daha sonra bu hizmeti her bileşenin yapıcısına dahil edin.

constructor(private _sharedService: SharedService){} 

o zaman sen değerini ayarlayabilirsiniz:

this._sharedService.setSharedValue("your input"); 

belirtip değeri olsun:

this.data = this._sharedService.dataString;