这是我的代码:
在这里,您可以找到一个仅用于向组件添加两个按钮的功能。
将其视为HTML代码
editFonction = "editRole()";
getActions(Dropup) {
return '<div class="dropdown ' + (Dropup ? 'dropup' : '') + '">'
+ '<button class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="Edit"'
+ '(click)='+this.editFonction+'>'
+ ' <i class="flaticon-edit-1"></i>'
+ '</button>'
+ '<button class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Delete">'
+ ' <i class="fa fa-trash-o"></i>'
+ '</button>';
}
对于负责编辑动作的第一个按钮,我有一个名为(click)= "editRole()"
的点击功能。 (此代码在组件A中)
我的问题是编辑功能的这个定义位于组件A中, 我想在另一个组件B中调用并实现此编辑功能的逻辑。
我现在要做的是:
我在组件A中创建了一个名为dataFunctions的数组
dataFunctions: any[] = [];
在构造函数中我只用函数名称
填充它constructor() {
this.dataFunctions = [this.editFonction];
}
在组件B中,我定义了一个viewChild:
@ViewChild(CustomDataTableComponent) child;
data : any[];
我只是恢复数据数组值:
ngAfterViewInit() {
this.data = this.child.dataFunctions;
console.log("output :",this.data);
}
}
我需要帮助。
提前致谢
答案 0 :(得分:0)
传递对组件A中组件B的引用(比如引用是cmpB)。
然后在html中你可以使用(click)="cmpB.editFonction"
。
例如
<componentB #cmpB>
</componentB>
<div (click)="cmpB.editFunction()">
This is where i want the function to be called
</div>
这是stackblitz的一个例子 stackblitz.com/edit/angular-xqpm4x