如何将一个对象中声明的函数传递给子组件

我有一个DatagridComponent，它只显示一些数据的行。这可以通过操作栏项目，他希望尽可能多的这个组件，并通过与它的功能时，一个项目（这是一个简单的按钮）被点击它被称为：如何将一个对象中声明的函数传递给子组件

DatagridComponent：

@Component({ 
    selector: 'llqa-datagrid', 
    templateUrl: './datagrid.component.html', 
    styleUrls: ['./datagrid.component.css'] 
}) 
export class DatagridComponent implements OnInit { 

    constructor() {} 

    @Input() actionBar: Array<{ 
    text: string, 
    action:() => {} 
    }>; 
}

datagrid.component.html：

<div class="datagrid"> 
    <div class="datagrid-actionbar"> 
    <button *ngFor="let actionBarItem of actionBar"(click)="actionBarItem.action()">{{actionBarItem.text}}</button> 
    </div> 
</div>

为父级

@Component({ 
    selector: 'llqa-parent', 
    templateUrl: './parent.component.html', 
    styleUrls: ['./parent.component.css'] 
}) 
export class ParentComponent implements OnInit { 

    constructor() {} 

    actionBar = [ 
    { 
     text: "Add", 
     action:() => { 
     this.add() 
     } 
    }, 
    { 
     text: "Delete", 
     action:() => { 
     this.delete() 
     } 
    } 
    ]; 

    add(): void { 
    // some code 
    } 

    delete(): void { 
    // some code 
    } 
}

parent.component.html：

<llqa-datagrid [actionBar]="actionbar"></llqa-datagrid>

我的问题是，该函数被调用，但失去的ParentComponent上下文。所以this将是DatagridComponent。我进行了研究并找到了一种使用@Output()和EventEmitter的方法，但这不适用于我的情况，因为我想调用的函数是对象的属性。而且因为一个人应该可以添加尽可能多的物品，所以我不能仅仅定义@Output()属性，对吗？

那么，我该如何解决我的问题？

来源

2017-08-16 RagnarLothbrok

“我的问题是，函数被调用”哪个函数？ – onetwo12

我将通过实际的网格实例的每个动作中这样

@Input() actionBar: Array<{ text: string, action: (grid: DatagridComponent) => {} }>;

在父

actionBar = [ { text: "Add", action: (grid) => { grd.add() } }, { text: "Delete", action: (grid) => { grid.delete() } } ];

我喜欢这种方式，因为你得到的类型信息，也没有神奇这个参考。

来源

2017-08-16 12:34:43

如何将一个对象中声明的函数传递给子组件

回答

相关问题