Dziecko nasłuchuje zdarzenia rodzica w Angular 2

W Angular Docs jest temat słuchania dziecięcych wydarzeń od rodziców. W porządku. Ale moim celem jest coś odwrotnego !. W mojej aplikacji jest „admin.component”, który przechowuje widok układu strony administratora (menu paska bocznego, pasek zadań, status itp.). W tym komponencie nadrzędnym skonfigurowałem system routerów do zmiany widoku głównego między innymi stronami administratora. Problem polega na zapisywaniu rzeczy po zmianie, użytkownik klika przycisk Zapisz na pasku zadań (który jest umieszczony w komponencie admin.component), a komponent potomny musi nasłuchiwać tego zdarzenia kliknięcia, aby wykonać zapisywanie personelu.

Myślę, że ten dokument mógłby ci pomóc:

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

W rzeczywistości możesz wykorzystać obserwowalny / temat, który rodzic zapewnia swoim dzieciom. Coś w tym stylu:

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

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

Komponent potomny może po prostu zasubskrybować ten temat:

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

}

W przeciwnym razie możesz w podobny sposób wykorzystać usługę współdzieloną zawierającą taki temat ...

Pomyślałem, że ze względu na potomność wspomnę o bardziej konwencjonalnym rozwiązaniu tego problemu : po prostu uzyskaj odniesienie do ViewChild, a następnie wywołaj bezpośrednio jedną z jego metod.

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

Jeśli dobrze zrozumiem pytanie, możliwe będzie tutaj bardziej proste podejście. Założenia -

• OP ma przycisk zapisywania w komponencie nadrzędnym
• Dane, które należy zapisać, znajdują się w komponentach podrzędnych
• Wszystkie inne dane, których może potrzebować składnik podrzędny, można uzyskać z usług

W komponencie macierzystym

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

A w dziecku ...

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

To po prostu wysyła kliknięcie przycisku do komponentu podrzędnego. Stamtąd składnik potomny może niezależnie zapisywać dane.

EDYCJA: jeśli dane z szablonu nadrzędnego również muszą zostać przekazane wraz z kliknięciem przycisku, jest to również możliwe przy takim podejściu. Daj mi znać, jeśli tak jest, a zaktualizuję próbki kodu.

Dla tych, którzy otrzymują Cannot read property 'notifyMe' of undefined

Spróbuj wywołać metodę wewnątrz ngAfterViewInit()intead ofngOnInit()