[英]Angular wrapper component with abstract method
After searching for a while, I did not find anything that I can use.搜索了一段时间后,我没有找到任何可以使用的东西。
I need to create a wrapper component, that has some buttons to call methods that will be in the inner component, like this:我需要创建一个包装组件,它有一些按钮可以调用内部组件中的方法,如下所示:
wrapper component:包装组件:
<div class="card">
<header class="card-header">
<button (click)="onRefreshClick()">Load</button>
</header>
<div class="card-block">
<ng-content></ng-content>
</div>
</div>
now I create another component (ChartA for example) that uses this wrapper:现在我创建另一个使用此包装器的组件(例如 ChartA):
<app-wrapper-card>
<div style='display: block;'>
<canvas baseChart class='chart' ....
</canvas>
</div>
</app-wrapper-card>
in the onRefreshClick
of wrapper component I need to call some method
from ChartA component.在包装器组件的
onRefreshClick
中,我需要从 ChartA 组件调用some method
。
How can I do this?我怎样才能做到这一点?
just do this:这样做:
<app-wrapper-card (messageEvent)="refreshButtonClicked($event)">
<div style='display: block;'>
<canvas baseChart class='chart' ....
</canvas>
</div>
</app-wrapper-card>
and add an EventEmitter in your wrapper script并在您的包装脚本中添加一个 EventEmitter
Your child component have to implement some abstract class.您的子组件必须实现一些抽象的 class。 Then define component-level provider like:
然后定义组件级提供程序,例如:
providers: [ {provide: BaseAbstractClass, useExisting: ChartA }]
Query child component with @ContentChild
:使用
@ContentChild
查询子组件:
@ContentChild(BaseAbstractClass) public baseClass: BaseAbstractClass;
Now you can call methods implemented in child components.现在您可以调用在子组件中实现的方法。
Working example: https://stackblitz.com/edit/angular-2ruhvm工作示例: https://stackblitz.com/edit/angular-2ruhvm
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.