如何使用共享服務將數據從一個組件發送到另一個組件

Question

我想使用主題將數據發送到其他組件（用於賺錢目的）。我無法取回數據。這裏是我的代碼：

app.component.ts

import { Component } from '@angular/core'; 
import { shareService } from './share.service'; 

@Component({ 
selector: 'my-app', 
    template: ` 
    <hello></hello> 
    <button (click)="passData()"> 
    Start 
    </button> 
    `, 
    styleUrls: [ './app.component.css' ], 
    providers:[shareService] 
}) 
export class AppComponent { 
    constructor(private service : shareService){} 

    passData(){ 
    this.service.send("hello"); 
} 

} 

hello.component.ts

import { Component, Input } from '@angular/core'; 
import { shareService } from './share.service'; 
import { Subscription } from 'rxjs/Subscription'; 

@Component({ 
    selector: 'hello', 
    template: `<h1>Hello!</h1>`, 
    styles: [`h1 { font-family: Lato; }`], 
    providers:[shareService] 
}) 
export class HelloComponent { 
    subscription: Subscription; 
    constructor(private share : shareService){ 
    this.subscription = share.subj$.subscribe(val=>{ 
    console.log(val); 
    }) 
    } 
} 

share.service.ts

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class shareService{ 

    private sub = new Subject(); 
    subj$ = this.sub.asObservable(); 

    send(value: string) { 
    this.sub.next(value); 
    } 

} 

我沒有獲得控制檯中的值。

這裏的工作演示：DEMO

Answer 1

通過將：

@Component({ 
    ..... 
    providers: [shareService] 
}) 

在這兩個組件

，你所創建的共享servcie的兩個不同的實例。 每個實例都不知道每個組件的數據。 在模塊級提供，它會工作。

@NgModule({ 
    .... 
    providers: [shareService] 
}) 

這樣，您將服務作爲單個實例注入到這兩個組件中，以便它們可以共享它，因爲它們將共享數據。

demo

見also

Answer 2

我不知道爲什麼被用於子$，但你不需要是

// just push data to subject. you can use BehavourSubject to initiatte a value. 
@Injectable() 
export class shareService{ 

    private sub = new Subject(); 

    confirmMission(astronaut: string) { 
    this.sub.next(astronaut); 
    } 

} 

，然後在第二組件子隸之

@Component({ 
    selector: 'hello', 
    template: `<h1>Hello!</h1>`, 
    styles: [`h1 { font-family: Lato; }`], 
    providers:[shareService] // this can be shared in module lebel or componenet level 
}) 
export class HelloComponent { 
    subscription: Subscription; 
    constructor(private share : shareService){ 
    this.subscription = share.subj.subscribe(val=>{ 
    console.log(val); 
    }) 
    } 
} 

確保在模塊級別提供服務或在組件中提供服務。