如何创建可以由多个angular2组件修改的对象？

Question

如何创建可以被多个 angular2 组件修改的对象。

例如。

PeopleService.ts

//a simple service
import {Injectable} from 'angular2/angular2'

@Injectable()
export class PeopleService {
  constructor() {
    this.people = [
      {id: 1, name: 'Brad'},
      {id: 2, name: 'Jules'},
      {id: 3, name: 'Jeff'}
    ];
}
  changeBrad(){
    this.people[0].name = "Brad_Changed";
  }
}

App.ts

import {Component, View} from 'angular2/angular2';
import {PeopleService} from './peopleService';

@Component({
  selector: 'my-app',
  bindings: [PeopleService]
})
@View({
  template: '{{appval}}',
})
export class App{
  appval:string;
  constructor(public peopleService:PeopleService){
    peopleService.changeBrad();
    this.appval = peopleService.people[0].name; // result : Brad_Changed
  }
}

Home.ts

import {Component, View} from 'angular2/angular2';
import {PeopleService} from './peopleService';

@Component({
  selector: 'my-home',
  bindings: [PeopleService]
})
@View({
  template: '{{homeval}}',
})
export class Home{
  homeval:string;
  constructor(public peopleService:PeopleService){
    this.homeval = peopleService.people[0].name; // result : Brad
  }
}

在 Home.ts 中，结果是 App.ts 未修改的“Brad” 我希望结果是 "Brad_Changed"，已被 App.ts 修改。如何编写我的 PeopleService.ts 以及如何通过引用将其传递给 angular2 中的其他组件？

Answer 1

只需从 Home 组件绑定中删除 PeopleService。通过添加此绑定，您正在为 Home 组件及其所有子组件创建 PeopleService 的新实例：

import {Component, View, Host} from 'angular2/angular2';
import {PeopleService} from './peopleService';

@Component({
  selector: 'home',
  // Adding this you're creating new instance of PeopleService for
  // Home component and all its children
  // bindings: [PeopleService]
})
@View({
  template: '<p>{{homeval}}</p>',
})
export class Home{
  homeval:string;
  constructor(peopleService:PeopleService){
    this.homeval = peopleService.people[0].name; // result : Brad
  }
}

见this plunker

如何创建可以由多个angular2组件修改的对象？

How to create object which can be modified by multiple angular2 component?

javascript

angular