如何使用共享服务将数据从一个组件发送到另一个组件

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

确保在模块级别提供服务或在组件中提供服务。