[英]Passing dynamic functions from parent component to grandchild component Angular
I am creating a common table component for my angular application so that the component takes input for rows, columns, along with some action button handler functions and render table.我正在为我的 angular 应用程序创建一个公共表组件,以便该组件接受行、列的输入,以及一些操作按钮处理函数和呈现表。
The table will be something like this桌子会是这样的
I In this way, a single component can be used to render table for the whole application.我通过这种方式,可以使用单个组件来为整个应用程序呈现表格。
//parent-component.ts
parentFunction1(){
//edit User
}
parentFunction2(){
//delete User
}
parentFunction3(){
//view user
}
I am passing data from the parent component as我从父组件传递数据为
//inside some-parent.component.html
<common-table
[columns]="columnConfig"
[dataSource]="rowConfig">
</common-table>
In my common-table.component.html
, based on conditions I need to render different components as:在我的common-table.component.html
中,根据条件我需要将不同的组件渲染为:
//inside common-table.component.html
<table-cell [row]="row" [column]="column"></table-cell>
from table-cell.component.html
I need to call functions of parent-component.ts
.从table-cell.component.html
我需要调用parent-component.ts
的函数。 For different components, my function name may vary, is there any way in angular so that if json对于不同的组件,我的 function 名称可能会有所不同,angular 中有什么方法可以使 json
[
{
name: 'Edit',
type: 'button',
outputHandler:parentFunction1
},
{
name: 'Delete',
type: 'button',
outputHandler:parentFunction2
},
{
name: 'View',
type: 'button',
outputHandler:parentFunction3
}
]
like this can be passed from parent component and use the functions of the parent component from grandchild table-cell.component.html
像这样可以从父组件传递并使用来自孙子table-cell.component.html
的父组件的功能
I can use output and eventemitter, but as number of functions passed and name of functions may vary, so It cannot be hard corded.我可以使用 output 和 eventemitter,但是由于传递的函数数量和函数名称可能会有所不同,所以不能硬连接。 How to achieve this.如何实现这一点。 Please help as I searched a lot but could not get the solution.请帮忙,因为我搜索了很多但无法找到解决方案。
This is how your root component looks like.这就是你的根组件的样子。
export class AppComponent {
title = "CodeSandbox";
myConfig: ConfigModel[] = [
{
name: "Edit",
type: "button",
outputHandler: this.parentFunction1
},
{
name: "Delete",
type: "button",
outputHandler: this.parentFunction2
},
{
name: "View",
type: "button",
outputHandler: this.parentFunction3
}
];
parentFunction1() {
console.log("parent func 1");
}
parentFunction2() {
console.log("parent func 2");
}
parentFunction3() {
console.log("parent func 3");
}
}
As you are passing this configuration to your grand child component.当您将此配置传递给您的大子组件时。 you can invoke the function directly from your configuration object.您可以直接从您的配置 object 中调用 function。
<div *ngFor="let item of config">
<button (click)="action(item)">{{item.name}}</button>
</div>
export class ActionComponent {
@Input() config: ConfigModel[];
action(item: ConfigModel) {
console.log(item);
item.outputHandler();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.