angular想定义一个可复用组件,用于显示父组件的数据以及点击按钮能调用某些父组件的函数

Question

问题描述

想定义一个可复用组件,父组件可以input数据和一些方法名,子组件显示这些数据,且父组件每输入一个函数名,子组件里会多出一个按钮,用户点击该按钮以实现相关功能.

目前我是想到这样的方法来实现:

子组件的部分ts代码:

  @Input()
  cardData: object;//需要显示的数据
  @Input()
  cardExtraActions: labelAction[] = [];//传入的操作数组,labelAction是我自定义的接口
  export interface labelAction {
      label: string,   //子组件的按钮显示的文字
      action: Function //点击按钮想要正常运行的函数
   }
  
  @Output()
  action = new EventEmitter();//output的事件: action
  
  /** 子组件点击按钮调用的函数
   * @param action: 就是父组件传入的函数
   *        data: 该函数需要用到的数据,即实参
   */
  clickButton(action,data){ 
    this.action.emit({action,data})//emit最多只能有一个参数,我把action和data合在一块emit上去
  }

父组件的相关html代码:

<my-child cardTitle="我的信息:" [cardData]="userData" 
          [cardExtraActions]="myActions" (action)="resolveAction($event)">
</my-child>

父组件相关ts代码:

myActions:labelAction[] = [{
    label: '修改',
    action: this.openUpdateModal//打开修改信息用的模态框,模态框在父组件上,因此调用时函数,this必须是父组件才能正常工作
  },{
    label: '删除',
    action: this.deleleData//删除信息,需要调用父组件注入的服务发http请求,因此调用时函数时,this必须是父组件才能正常工作
  }];
  resolveAction(event){//监听子组件的action事件
    if(event.action && event.data)
      event.action.call(this,event.data);//把this指向父组件调用传来的action,
  }

大体功能已经实现,但是总感觉很多不足

• 1 :父组件把需要调用的函数input到子组件,子组件又output到父组件,父组件拿到这个函数还要用call把this指向自己才能让函数正常工作.
• 假如我父传子时传的是函数名,子组件output之后我怎么找到相应的函数来调用?
• 或者我子组件不止定义一个output,那怎么样根据父组件传来的labelAction数组 定义相应的output呢?
• 其实我最想要的效果是:父组件传入一个labelAction数组,然后监听相应的事件就行了,代码应该如下:

myActions = [{label:'删除',action:dele},{label:'修改',action:update}]

<my-child  cardTitle="我的信息:" [cardData]="userData"                  
    [cardExtraActions]="myActions" (dele)="deleleData($event)" (update)="openUpdateModal()">
</my-child>

这个效果要怎么才能实现?

Answer 1

你的 cardExtraActions 不用传 fn

子组件

@Input() cardExtraActions: Array<string>;
@Output() dele = new EventEmitter<any>();
@Output() update = new EventEmitter<any>();

父组件

deleleData(e: any) { // todo }
openUpdateModal() { // todo }