atualizando mudanças de variables ​​em componentes de um serviço com angular2

Meu aplicativo tem um NameService que contém o nome.

Existem dois componentes filhos do App, Navbar e TheContent que fazem referência a este serviço. Sempre que o nome mudar no serviço, eu quero que ele seja atualizado em ambos os outros componentes. Como posso fazer isso?

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: '
This is the navbar, user name is {{name}}.
' }) export class Navbar { name: any; constructor(nameService: NameService) { this.name = nameService.name; } } // The content area @Component({ selector: 'thecontent', template: '
This is the content area. Hello user {{name}}.
' }) 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: '' }) export class App { constructor(public nameService: NameService) { } }

Forneça um evento no serviço e assine-o nos componentes:

 @Injectable() class NameService { name: any; // EventEmitter should not be used this way - only for `@Output()`s //nameChange: EventEmitter = new EventEmitter(); nameChange: Subject = new Subject(); 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(); } } 

Veja também
angular.io – INTERAÇÃO DE COMPONENTES – Pai e filhos se comunicam através de um serviço

Como name em NameService é um tipo primitivo, você obterá instâncias diferentes no serviço e em seus componentes. Quando você altera o name no NameService , as propriedades do componente ainda têm o valor inicial e a binding não funciona conforme o esperado.

Você deve aplicar o angular1 “regra de ponto” aqui e vincular a um tipo de referência. Altere NameService para armazenar um object que contenha o nome.

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

Você pode vincular a este object e obter atualizações para a propriedade de name automaticamente.

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

Eu acho que a solução fornecida por Günter é a melhor.

Dito isto, você deve estar ciente de que os serviços Angular2 são singleton que ocorrem em uma tree de injetores. Isso significa que:

  • Se você definir seu serviço no nível do aplicativo (dentro do segundo parâmetro do método de bootstrap ), a instância poderá ser compartilhada por todos os elementos (componentes e serviço).
  • Se você definir seu serviço no nível do componente (dentro do atributo providers ), a instância será específica para o componente e seus subcomponentes.

Para obter mais detalhes sobre esse aspecto, você pode consultar o documento “Injeção de Dependência Hierárquica”: https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

Espero que ajude você, Thierry