【问题标题】：angular: access ng-content nested component method from outside角度：从外部访问 ng-content 嵌套组件方法
【发布时间】：2019-01-22 18:06:25
【问题描述】：

我有两个共享组件，我希望父组件在其子组件中调用方法

共享组件 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>

在这种情况下我们如何在父子组件之间进行通信

【问题讨论】：

你可以使用@ContentChild装饰器，就像@ViewChild一样。它允许你引用你的组件实例并用它做任何你想做的事情。要在子节点中有父引用，您可以在依赖注入中使用 @Host 装饰器。

标签： angular angular7

【解决方案1】：

您可以通过 2 种方式做到这一点：

1) @Output 参数在父组件中。

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>

检查这个使用@Output 方法的simple StackBlitz DEMO

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>

检查这个使用@ContentChild 方法的simple StackBlitz DEMO

任何一种方式都可以很好地满足您的要求。

【讨论】：

你是英雄。