angular: доступ к методу вложенного компонента ng-контента извне

Question

У меня есть два общих компонента, и я хочу, чтобы родитель вызвал метод в его дочернем элементе

общий компонент 1 (родительский)

@Component({
selector: 'parent',
template: `<div>
                <div #parentBody>
                   <ng-content select="[parentBody]"></ng-content>
                </div>
                <button (click)=" " >tell child to dance</button>
            </div>
        `,
})
export class ParentComponent {
  constructor() { }

}

общий компонент 2 (дочерний элемент)

@Component({
selector: 'child',
template: `<div>
                <p>I'm a child component</p>
           </div>
          `,
})
export class ChildComponent {
  dance() {
     alert('dancing');
  }
}

и в компоненте приложения

<parent>
    <div parentBody>
       <child></child>
    </div>
<parent>

как мы можем общаться между родительским и дочерним компонентом в этом случае

Answer 1

Вы можете сделать это двумя способами:

1) @ Выходной параметр в родительском компоненте.

parent.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'parent',
  template: `
    <div>
      <div #parentBody>
        <ng-content select="[parentBody]"></ng-content>
      </div>
      <button (click)="dance.emit()">tell child to dance</button>
    </div>
  `
})
export class ParentComponent {
  @Output() dance = new EventEmitter();
}

app.component.html

<parent (dance)="myChild.dance()">
    <div parentBody>
       <child #myChild></child>
    </div>
<parent>

Проверьте это простой StackBlitz DEMO , использующий подход @Output

---

2) @ ContentChild в родительском компоненте.

(Добавлено после того, как @trichetriche прокомментировал этот вопрос. Спасибо @trichetriche!)

parent.component.ts

import { Component, Input, ContentChild } from '@angular/core';

import { IChild } from './i-child';

@Component({
  selector: 'parent',
  template: `
    <div>
      <div #parentBody>
        <ng-content select="[parentBody]"></ng-content>
      </div>
      <button (click)="onClick()">tell child to dance</button>
    </div>
  `
})
export class ParentComponent {
  @ContentChild('myChild') child: IChild;

  onClick() {
    this.child.dance();
  }
}

app.component.html

<parent>
    <div parentBody>
       <child #myChild></child>
    </div>
<parent>

Проверьте это простой StackBlitz DEMO , использующий подход @ContentChild

---

В любом случае это хорошее решение для ваших требований.