实现属于组件B中组件A的方法()的逻辑

时间:2018-05-28 11:30:39

标签: jquery angular typescript components angular5

这是我的代码:

在这里,您可以找到一个仅用于向组件添加两个按钮的功能。

将其视为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);
      }
}

我需要帮助。

提前致谢

1 个答案:

答案 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