Angular 2 - Как вызвать метод для дочернего элемента из родительского

Можно отправить данные от родителя дочернему элементу через @Input или вызвать метод родительского объекта от дочернего элемента с помощью @Output, но я бы хотел поступить совершенно иначе, вызывая метод на ребенок от родителя. В основном что-то вроде этого:

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

и ребенок:

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

  constructor() {}
}

Background - это своего рода запрос "get", то есть для получения обновленного статуса от ребенка.

Теперь я знаю, что могу достичь этого с помощью сервиса и Subject/Observable, но мне было интересно, нет ли чего-то более простого?

Ответ 1

Я думаю, что это может быть то, что вы ищете:

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

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

Вы можете получить доступ к дочерним свойствам и методам, используя локальные переменные в шаблоне или используя декоратор @ViewChild в классе родительского компонента.

Ответ 2

@ViewChild - правильное решение, но приведенная выше документация была для меня немного неясной, поэтому я передаю немного более дружелюбное объяснение, которое помогло мне понять его.

Пусть есть ChildComponent с методом:

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

И родительский компонент, где мы можем вызвать метод выше, используя технику '@ViewChild':

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!
  }
}