Das Kind wartet in Angular 2 auf das übergeordnete Ereignis

In eckigen Dokumenten gibt es ein Thema zum Abhören von Kinderereignissen von Eltern. Das ist gut. Aber mein Zweck ist etwas Umgekehrtes!. In meiner App gibt es eine 'admin.component', die die Layoutansicht der Admin-Seite enthält (Seitenleistenmenü, Taskleiste, Status usw.). In dieser übergeordneten Komponente habe ich das Routersystem zum Ändern der Hauptansicht zwischen anderen Seiten des Administrators konfiguriert. Das Problem besteht darin, dass nach dem Ändern Dinge gespeichert werden. Der Benutzer klickt auf die Schaltfläche Speichern in der Taskleiste (die sich in der admin.component befindet) und die untergeordnete Komponente muss dieses Klickereignis abhören, um Mitarbeiter zu speichern.

Ich denke, dass dieses Dokument für Sie hilfreich sein könnte:

• https://angular.io/docs/ts/latest/cookbook/component-communication.html

Tatsächlich könnten Sie ein beobachtbares Objekt nutzen, das der Elternteil seinen Kindern zur Verfügung stellt. So ähnlich:

@Component({
  (...)
  template: `
    <child [parentSubject]="parentSubject"></child>
  `,
  directives: [ ChildComponent ]
})
export class ParentComponent {
  parentSubject:Subject<any> = new Subject();

  notifyChildren() {
    this.parentSubject.next('some value');
  }
}

Die untergeordnete Komponente kann dieses Thema einfach abonnieren:

@Component({
  (...)
})
export class ChildComponent {
  @Input()
  parentSubject:Subject<any>;

  ngOnInit() {
    this.parentSubject.subscribe(event => {
      // called when the notifyChildren method is
      // called in the parent component
    });
  }

  ngOnDestroy() {
    // needed if child gets re-created (eg on some model changes)
    // note that subsequent subscriptions on the same subject will fail
    // so the parent has to re-create parentSubject on changes
    this.parentSubject.unsubscribe();
  }

}

Andernfalls könnten Sie einen gemeinsam genutzten Dienst, der ein solches Thema enthält, auf ähnliche Weise nutzen ...

Aus Gründen der Nachwelt dachte ich nur, ich würde die konventionellere Lösung dafür erwähnen : Erhalten Sie einfach einen Verweis auf das ViewChild und rufen Sie dann eine seiner Methoden direkt auf.

@Component({
  selector: 'app-child'
})
export class ChildComponent {

  notifyMe() {
    console.log('Event Fired');
  }
}

@Component({
  selector: 'app-parent',
  template: `<app-child #child></app-child>`
})
export class ParentComponent {

  @ViewChild('child')
  private child: ChildComponent;

  ngOnInit() {
    this.child.notifyMe();
  }
}

Ein nackterer Ansatz könnte hier möglich sein, wenn ich die Frage richtig verstehe. Annahmen --

• OP verfügt über eine Schaltfläche zum Speichern in der übergeordneten Komponente
• Die Daten, die gespeichert werden müssen, befinden sich in den untergeordneten Komponenten
• Auf alle anderen Daten, die die untergeordnete Komponente möglicherweise benötigt, kann über Dienste zugegriffen werden

In der übergeordneten Komponente

<button type="button" (click)="prop1=!prop1">Save Button</button>
<app-child-component [setProp]='prop1'></app-child-component>

Und im Kind ..

prop1:boolean;
  @Input()
  set setProp(p: boolean) {
    // -- perform save function here
}

Dadurch wird einfach der Klick auf die Schaltfläche an die untergeordnete Komponente gesendet. Von dort aus kann die untergeordnete Komponente die Daten unabhängig speichern.

BEARBEITEN: Wenn Daten aus der übergeordneten Vorlage zusammen mit dem Klicken auf die Schaltfläche übergeben werden müssen, ist dies auch mit diesem Ansatz möglich. Lassen Sie mich wissen, ob dies der Fall ist, und ich werde die Codebeispiele aktualisieren.

Für diejenigen, die bekommen Cannot read property 'notifyMe' of undefined

Versuchen Sie, die Methode in ngAfterViewInit()intead von aufzurufenngOnInit()