使用angular2从服务更新组件中的变量更改

我的应用程序具有保存名称的NameService。

App有两个子组件，Navbar和TheContent引用了此服务。每当服务中的名称更改时，我都希望它在其他两个组件中进行更新。我怎样才能做到这一点？

import {Component, Injectable} from 'angular2/core'

// Name Service

@Injectable()
class NameService {
  name: any;
  constructor() {
    this.name = "Jack";
  }
  change(){
    this.name = "Jane";
  }
}

// The navbar
@Component({
  selector: 'navbar',
  template: '<div>This is the navbar, user name is {{name}}.</div>'
})
export class Navbar {
  name: any;
  constructor(nameService: NameService) {
    this.name = nameService.name;
  }
}

// The content area
@Component({
  selector: 'thecontent',
  template: '<div>This is the content area. Hello user {{name}}. <button (click)=changeMyName()>Change the name</button></div>'
})
export class TheContent {

  name: any;

  constructor(public nameService: NameService) {
    this.name = nameService.name;
  }
  changeMyName() {
       this.nameService.change();
     console.log(this.nameService.name);
  }
}


@Component({
  selector: 'app',
  providers: [NameService],
  directives: [TheContent, Navbar],
  template: '<navbar></navbar><thecontent></thecontent>'
})
export class App {
  constructor(public nameService: NameService) {
  }
}

在服务中提供一个事件并在组件中进行订阅：

@Injectable()
class NameService {
  name: any;
  // EventEmitter should not be used this way - only for `@Output()`s
  //nameChange: EventEmitter<string> = new EventEmitter<string>();
  nameChange: Subject<string> = new Subject<string>();
  constructor() {
    this.name = "Jack";
  }
  change(){
    this.name = 'Jane';
    this.nameChange.next(this.name);
  }
}

export class SomeComponent { 
  constructor(private nameService: NameService) {
    this.name = nameService.name;
    this._subscription = nameService.nameChange.subscribe((value) => { 
      this.name = value; 
    });
  }

  ngOnDestroy() {
   //prevent memory leak when component destroyed
    this._subscription.unsubscribe();
  }
}

另请参见
angular.io-组件交互-父母和孩子通过服务进行交流

由于nameinNameService是原始类型，因此您将在服务和组件中获得不同的实例。当您更改name时NameService，组件属性仍然具有初始值，并且绑定无法按预期工作。

您应在此处应用angular1“点规则”并绑定到引用类型。更改NameService以存储包含名称的对象。

export interface Info {
   name:string;
}

@Injectable()
class NameService {
  info: Info = { name : "Jack" };
  change(){
    this.info.name = "Jane";
  }
}

您可以绑定到该对象并name自动获取该属性的更新。

// The navbar
@Component({
  selector: 'navbar',
  template: '<div>This is the navbar, user name is {{info.name}}.</div>'
})
export class Navbar {
  info: Info;
  constructor(nameService: NameService) {
    this.info = nameService.info;
  }
}

我认为Günter提供的解决方案是最好的。

就是说，您必须意识到Angular2服务是单例的，它发生在注入器树中。这意味着：

• 如果在应用程序级别（在方法的第二个参数内）定义服务bootstrap，则实例可以被所有元素（组件和服务）共享。
• 如果您在组件级别（在providers属性内）定义服务，则该实例将特定于组件及其子组件。

有关此方面的更多详细信息，可以查看“分层依赖注入”文档：https : //angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

希望对您有帮助，蒂埃里