Как вызвать метод в дочернем компоненте из родительского компонента?

Question

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

Я хочу изменить некоторые значения в дочернем компоненте по нажатию кнопки, возился и что-то устанавливал как это.

@Component({
 selector: 'app-parent-component'
 template: `
 <button (click)="refreshData()" />
 <app-child-component> </app-child-component>
`
})
export class ParentComponent{
 refreshData() {
   ChildComponent.runRefresh()
 }
}

@Component({
 selector: 'app-child-component'
 template: ``
})
export class ChildComponent{
 static runRefresh() {
   console.log('refreshing')
   // Do things involving data on a service scoped to this component/module
 }
}

Мне было любопытно, было ли что-то по сути с этим подходом? Есть ли лучшие способы решить проблему. Я знаком с проверкой изменений в событии NgOnChanges.

Я предполагаю, что я пытаюсь сделать это - вызвать метод внутри дочернего компонента, который использует ресурсы дочернего компонента в сервисе области действия, из родительского компонента.

Редактировать: Также известно об использовании @ViewChild и не делать метод дочерних компонентов stati c. Может быть, это единственный «правильный» путь?

Answer 1

Если runRefresh является публичным c методом дочернего компонента:

export class ChildComponent{
  public runRefresh() {
    ...
  }
}

, вы можете вызвать его непосредственно в родительском шаблоне, обратившись к дочернему компоненту с помощью * 1005. * переменная ссылки на шаблон :

<button (click)="child.runRefresh()" />
<app-child-component #child></app-child-component>

См. этот стек для демонстрации.

Answer 2

Самый простой способ - написать сервис, который предоставляет событие, отправляет его в parent, подписывается в childs.

Другой способ:

Вы можете написать директиву, которая предоставляет ссылку на компонент:

import { Directive, TemplateRef } from '@angular/core';

@Directive({
  selector: '[selectordirective]',
})
export class SelectorDirective  {
  constructor(public cmpRef: ChildComponent) { }
}

Прикрепите ее к своему ребенку:

<app-child-component selectordirective> </app-child-component>

Используйте ViewChild, чтобы прочитать ссылку в ParentComponent:

@ViewChild(SelectorDirective) child !: SelectorDirective;

  ngAfterViewInit() {
    child.cmpRef.runRefresh()
  }