Question

下面是我的代码

父component.ts

data  = [{
    "name":"This is my name",
    "editButton": {
                "name":"Edit",
                "click":"editMethod()",
            },
    "addButton": {
                    "Name":"Add",
                    "click":"addMethod()"
    }
}]

editMethod(rowVal){
    console.log("calling edit");
}


addMethod(rowVal){
    console.log("calling add");
}

parent.html

<button-app [childdata]="data" (opmethod)="iDotknowtoCallMethod()"></button-app>

childComponent.ts

@Input()
childdata;

@Output()
opmethod = new EventEmitter<string>();

子component.html

<div *ngFor="let ech in childdata">
    <label>{{ech.name}}</label>
    <button *ngIf="ech.editButton" (click)="ech.editButton.click" >{{ech.editButton.name}}</button>
    <button *ngIf="ech.addButton" (click)="ech.addButton.click">{{ech.addButton.name}}</button>
</div>

我们可以使用emit调用父方法，这不是我的问题。

我正在尝试调用父方法，该方法的名称在data对象中提供。但是我对如何调用该方法一无所知。

Answer 1

您必须使用

从子组件向父组件发出Output事件

opmethod.emit('Your data')

child.html

<button *ngIf="ech.editButton" (click)="opmethod.emit('Your data')" >{{ech.editButton.name}}</button>
    <button *ngIf="ech.addButton" (click)="opmethod.emit('Your data')">{{ech.addButton.name}}</button>

在parent.html中

<button-app [childdata]="data" (opmethod)="addMethod($event)"></button-app>

Answer 2

这不是一个好方法。将您的数据更改为此：

enum BottonTypes {
    edit,
    add
}
class BUttonClass {
    name: string;
    type: ButtonTypes
}
data: ButtonClass[]  = [{
        name:"This is my name",
        type: ButtonTypes.edit
    },
    {
       'name':"This is my name",
        type: ButtonTypes.save
    }
]

<div *ngFor="let ech in childdata">
    <label>{{ech.name}}</label>
    <button *ngIf="ech.type === 0" (click)="buttonClicked(ech)" >{{ech.editButton.name}}</button>
    <button *ngIf="ech.type === 1" (click)="buttonClicked(ech)">{{ech.addButton.name}}</button>
</div>

和您的ts中：

opmethod = new EventEmitter<ButtonClass>();

buttonClicked(btn: ButtonClass)
{
    this.opmethod.emit(btn);
}

父组件html：

<button-app [childdata]="data" (opmethod)="iDotknowtoCallMethod($event)"></button-app>

父component.ts：

iDotknowtoCallMethod(btn: ButtonCLass) {
    do what you want
}

希望这会有所帮助。

Answer 3

根据@Eliseo的评论，我得到了我的问题的答案

parentcomponent.ts

data  = [{
    "name":"This is my name",
    "editButton": {
                "name":"Edit",
                "click":this.editMethod,
            },
    "addButton": {
                    "Name":"Add",
                    "click":this.addMethod
    }
}]

parentcomponent.html

<button-app [childdata]="data" (opmethod)="$event"></button-app>

childcomponent.html

<div *ngFor="let ech in childdata">
    <label>{{ech.name}}</label>
    <button *ngIf="ech.editButton" (click)="opmethod.emit(ech.editButton.click(ech))" >{{ech.editButton.name}}</button>
    <button *ngIf="ech.addButton" (click)="opmethod.emit(ech.addButton.click(ech))">{{ech.addButton.name}}</button>
</div>

我应该在子组件中发出该方法。在父组件中，我只应声明$event它在调用动态方法。

如何从子组件动态调用父方法？

3 个答案: