angular - 通过 Angular 2 中的服务获取和更新字符串

Question

我试图通过一个非常简单的应用程序更好地理解服务，该应用程序获取和更新服务中字符串的值并将其显示在组件中。

这是服务:

import {Injectable} from 'angular2/core';

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

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

这是主要的“应用”组件:

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

}

...这是“其他”部分:

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.

当文本添加到输入并单击按钮时，我想显示在“其他”组件中输入的值，只是为了演示如何获取和设置服务数据。然而，它只是默默地失败了。

谁能解释我做错了什么？

谢谢

Answer 1

你的代码是正确的，只是你的other组件不知道你更新了服务，所以它不会请求新的数据。对于这种情况，Angular2 使用 Observables:

服务:

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

主要组成部分

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

其他组件

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

可以在这里找到更新的 plunker:https://plnkr.co/edit/neM6EdYYUkGkRpF0fKGS?p=preview

Angular2 组件之间的交互可以在这里找到:https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service