Angular 2 Kommunikation über einen Dienst ohne Verwendung eines Betreffs

Question

Ich frage mich, ob ich das folgende Szenario ohne ein Thema lösen könnte. Ich habe zwei Komponenten: Die erste Komponente erstellt einen Helden und die andere Komponente zeigt einen Helden. Diese Komponenten kommunizieren über einen Dienst. Zur Zeit habe ich die folgende Lösung:

Held Creation

@Component({ 
    selector: 'hero-creation', 
    .... 
}) 
export class HeroCreation{ 

    constructor(private heroSercice: HeroService){ 
    } 

    onClick(){ 
    this.heroSercice.addHero(); 
    } 
} 

Held-Service

@Injectable() 
export class HeroService { 
public hero$: Subject<string> = new Subject<string>(); 

    constructor() { 
    } 

    public addHero(hero: string): void { 
    this.hero$.next(hero); 
    } 
} 

Held anzeigen

@Component({ 
selector: 'hero-display', 
.... 
}) 
export class HeroDisplay{ 

    constructor(private heroSercice: HeroService){ 
    //Use async pipe in template to display the hero 
    this.heros$ = this.heroSercice.hero$ 
    } 
} 

Das Ziel wäre, das gleiche Feature nur mit einfachen Observables zu implementieren, ohne ein Thema zu verwenden.

Answer 1

Dies ist ein Anwendungsfall für ein Thema.

Die Subjektklasse erbt sowohl Observable als auch Observer in dem Sinne, dass sie sowohl ein Beobachter als auch ein Observable ist.

Nachdem hero$ Observable erstellt wurde, sollten neue Werte irgendwie hinzugefügt werden. Und sie sollten durch Beobachter hinzugefügt werden. Ohne Subjekt, hat ein Beobachter manuell, um ausgesetzt sein, es zu erreichen:

protected _heroObserver: Observer<string>; 
public hero$: Observable<string> = Observable.create<string>(observer => { 
    this._heroObserver = observer; 
}); 
... 
public addHero(hero: string): void { 
    this._heroObserver.next(hero); 
} 

Und das ist genau das, was Themen tun sollen. Da addHero als Setter fungiert, wird die Einkapselung eines Subjekts als öffentliche Eigenschaft aufgehoben. Um Verkapselung zu erhalten, ist es möglich, nur hero$ beobachtbaren statt aussetzen:

protected _heroSubject: Subject<string> = new Subject<string>(); 
public hero$: Observable<string> = this._heroSubject.asObservable(); 
... 
public addHero(hero: string): void { 
    this._heroSubject.next(hero); 
}