角度:从外部访问ng-Content嵌套组件方法 [英] angular: access ng-content nested component method from outside
本文介绍了角度:从外部访问ng-Content嵌套组件方法的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有两个共享组件,我希望父组件调用其子组件中的方法
共享组件%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>
在这种情况下,如何在父组件和子组件之间进行通信
推荐答案
有两种方法:
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>
检查此simple 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>
检查此simple StackBlitz DEMO正在使用@ContentChild方法
这两种方法都可以很好地满足您的要求。
这篇关于角度:从外部访问ng-Content嵌套组件方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文