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

}

...这里是'其他'组件：

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

Answer 2

我认为你做的是正确的事情，只是错过了使用Observables的最后一步。我希望enter link description here可以提供帮助。

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中的服务获取并更新字符串

3 个答案: