主页 / coding / 问题 / 78892867
Accepted
Fred2020
Asked: 2024-08-20 22:01:19 +0800 CST

动态组件输出

  • 772

我在 Angular 中有两个组件，一个父组件和一个子组件。我希望父组件能够

  1. 将表示可点击对象的对象数组传递给子对象
  2. 让子组件根据可点击事物数组输入动态创建输出
  3. 如果输入数组中的任何项目被点击，则引发事件。

大致形状如下：

interface ClickableThing
{
  name:string;
  eventName:string
}

例子

//clickableThings definition
[{
  name:"delete";
  eventName:"deleteEvent"
},
{
  name:"save";
  eventName:"saveEvent"
}]

<child-component [clickableThings]="clickableThings" 
(deleteEvent)="handleDeleteEvent()" 
(saveEvent)="handleSaveEvent())">

子组件必须根据输入 clickableThings 动态创建输出。这可能吗？

我尝试过

我这里有一个更基本的方法StackBlitz 演示

angular

2 个回答

  1. Best Answer

    Input和Output要在组件加载期间初始化，没有动态输入和输出。

    因为这些需要在父级上进行配置，才能将数据传递或接收到子组件中。

    您当前的解决方案看起来不错。

    • 1

  2. 请记住，在输出中你可以发出任何对象，而不仅仅是字符串

    注意：你可以在你的父母中使用一些类似的

      handleChildEvent({funcion,arg}:{funcion: string,arg:any}) {
    (this as any)[funcion](arg)
  }

  event1(arg:any)
  {
    console.log(arg)
  }
  event2(arg:any)
  {
    console.log(arg)
  }
  event3(arg:any)
  {
    console.log(arg)
  }

    你发出一些像

      eventOccurred = output<{funcion:string,arg:any}>();

  constructor() {}

  handleEventOccurred(eventName: string) {
    this.eventOccurred.emit({funcion:eventName,arg:eventName});
  }

    你的分叉 stackblitz

    • 0

相关问题