您可以通过两种方式做到这一点:
1) @Output父组件中的参数。
父组件.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();
}
应用程序组件.html:
<parent (dance)="myChild.dance()">
<div parentBody>
<child #myChild></child>
</div>
<parent>
检查这个简单的 StackBlitz 演示 https://stackblitz.com/edit/angular-ng-content-so-54304318这是使用 @Output 方法
2) @ContentChild父组件中的参数。
(在@trichetriche评论此问题后添加。感谢@trichetriche!)
父组件.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();
}
}
应用程序组件.html:
<parent>
<div parentBody>
<child #myChild></child>
</div>
<parent>
检查这个简单的 StackBlitz 演示 https://stackblitz.com/edit/angular-ng-content-contentchild-so-54304318这是使用 @ContentChild 方法
无论哪种方式都可以很好地满足您的要求。