typescript - Angular 2 - Hur man triggar en metod på ett barn från föräldern

Det är möjligt att skicka data från föräldern till ett barn genom @Input, eller att anropa en metod på föräldern från barnet med @Output, men jag skulle vilja göra precis tvärtom, det vill säga att anropa en metod på barnet från föräldern. I princip något sånt här:

@Component({
  selector: 'parent',
  directives: [Child],
  template: `
<child
  [fn]="parentFn"
></child>
`
})
class Parent {
  constructor() {
    this.parentFn()
  }
  parentFn() {
    console.log('Parent triggering')
  }
}

och barnet:

@Component({
  selector: 'child',
  template: `...`
})
class Child {
  @Input()
  fn() {
    console.log('triggered from the parent')
  }

  constructor() {}
}

Bakgrund är en typ av "get"-förfrågan, dvs. för att få en uppdaterad status från barnet.

Nu vet jag att jag skulle kunna uppnå det med en tjänst och Subject/Observable, men jag undrade om det inte finns något mer direkt?

Svar #1

@ViewChild är den rätta lösningen, men dokumentationen som länkades ovan var lite otydlig för mig, så jag ger en lite mer vänlig förklaring som hjälpte mig att förstå den.

Låt oss ha en ChildComponent med en metod:

whoAmI() {
  return 'I am a child!!';
}

Och den överordnade komponenten, där vi kan anropa metoden ovan genom att använda '@ViewChild'-tekniken:

import { Component, ViewChild, OnInit } from '@angular/core';

import { ChildComponent } from './child.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  @ViewChild(ChildComponent) child: ChildComponent;

  ngOnInit() {
    console.log(this.child.whoAmI()); // I am a child!
  }
}

Svar #2

Jag tror att det här kan vara vad du letar efter:

https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable

https://angular.io/guide/component-interaction#parent-calls-an-viewchild

Du kan komma åt barnets egenskaper och metoder genom att använda lokala variabler inom mallen eller genom att använda @ViewChild-dekoreraren i förälderns komponentklass.

Relaterade artiklar