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

Question

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

这是服务：

import {Injectable} from 'angular2/core';

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

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

这是主要的 'app' 组成部分：

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

}

...这是 'other' 组件：

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.

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

谁能解释我做错了什么？

谢谢

Answer 1

我认为您做对了，只是错过了最后一步，即使用 Observables。我希望这篇能帮到您。

Answer 2

您的代码是正确的，只是您的 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; 
      });
  }
}

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

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

Answer 3

使用 observables 可能是正确的做法，但也有另一种方法。不要在任何组件上添加 providers: [ SharedService ] ，否则组件将获得不同的实例。仅在 bootstrap().

处提供一次

bootstrap(AppComponent, [ SharedService ]);

然后将此服务包含在每个组件的构造函数中。

constructor(private _sharedService: SharedService){}

那么您可以将值设置为：

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

并获取值为：

this.data = this._sharedService.dataString;

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

Get and update a string through a service in Angular 2

angular

angular2-services