Aktualisieren von Variablenänderungen in Komponenten aus einem Dienst mit angle2

Meine App hat einen NameService, der den Namen enthält.

Es gibt zwei untergeordnete Komponenten von App, Navbar und TheContent, die auf diesen Dienst verweisen. Immer wenn sich der Name im Dienst ändert, möchte ich, dass er in beiden anderen Komponenten aktualisiert wird. Wie kann ich das machen?

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

Stellen Sie ein Ereignis im Dienst bereit und abonnieren Sie es in den Komponenten:

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

Siehe auch
angle.io - KOMPONENTEN-INTERAKTION - Eltern und Kinder kommunizieren über einen Dienst

Da es sich bei namein NameServiceum einen primitiven Typ handelt, erhalten Sie eine andere Instanz im Dienst und in Ihren Komponenten. Wenn Sie ändern namein NameService, haben die Bauteileigenschaften noch den Anfangswert und die Bindung nicht funktioniert wie erwartet.

Sie sollten hier die winkel1 "Punktregel" anwenden und an einen Referenztyp binden. Ändern Sie NameServicediese Option , um ein Objekt zu speichern, das den Namen enthält.

export interface Info {
   name:string;
}

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

Sie können an dieses Objekt binden und nameautomatisch Aktualisierungen der Eigenschaft erhalten.

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

Ich denke, dass die von Günter bereitgestellte Lösung die beste ist.

Sie müssen sich jedoch bewusst sein, dass Angular2-Dienste Singleton-Dienste sind, die in einem Baum von Injektoren stattfinden. Dies bedeutet, dass:

• Wenn Sie Ihren Service auf Anwendungsebene definieren (innerhalb des zweiten Parameters der bootstrapMethode), kann die Instanz von allen Elementen (Komponenten und Service) gemeinsam genutzt werden.
• Wenn Sie Ihren Service auf Komponentenebene (innerhalb des providersAttributs) definieren, ist die Instanz spezifisch für die Komponente und ihre Unterkomponenten.

Weitere Einzelheiten zu diesem Aspekt finden Sie im Dokument "Hierarchical Dependency Injection": https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

Hoffe es hilft dir, Thierry