оновлення змінних змін у компонентах із сервісу за допомогою angular2

Question 1

У моєму додатку є 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) {
  }
}

Question 2

Надайте подію в службі та підпишіться на неї в компонентах:

@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 - ВЗАЄМОДІЯ КОМПОНЕНТІВ - Батьки та діти спілкуються через послугу

Question 3

Оскільки namein NameService- примітивний тип, ви отримаєте різні екземпляри в службі та ваших компонентах. При зміні 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;
  }
}

Question 4

Я думаю, що рішення, яке пропонує Гюнтер, є найкращим.

Тим не менш, ви повинні знати, що послуги Angular2 є єдиними, які розміщуються у дереві форсунок. Це означає що:

якщо ви визначаєте свою службу на рівні програми (у межах другого параметра bootstrapметоду), екземпляр може бути спільним для всіх елементів (компонентів та служби).
якщо Ви визначаєте свою послугу на рівні компонентів (усередині providersатрибута), екземпляр буде специфічним для компонента та його підкомпонентів.

Щоб отримати докладнішу інформацію про такий аспект, ви можете поглянути на документ "Впорскування ієрархічної залежності": https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

Сподіваюся, це допоможе тобі, Тьєррі