Question

我有一个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的方法，但这在我的情况下不起作用，因为我想调用的函数是一个对象的属性。因为一个人应该可以添加他想要的actionBar项，我不能只定义@Output()属性，我是对的吗？

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

Answer 1

我会像这样在每个动作中传递实际的网格实例

for name, amount in name_list: print("Name:{}".format(name)) print("Count:{}".format(amount))

在父母

中

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

我喜欢这种方式，因为你正在获取类型信息，并且没有神奇的参考。

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

1 个答案: