如何使用Angular 6在一个输入中将多个对象发送到嵌套子组件

Posted 2023-02-23

【中文标题】如何使用Angular 6在一个输入中将多个对象发送到嵌套子组件

【英文标题】：How to send multiple objects to nested child component in one input using Angular 6

【发布时间】：2019-05-07 22:38:48

【问题描述】：

我想使用一个输入向子组件发送多个对象或参数：

<child [OneInput]="object1,object2"></child>

因为在子组件中我使用了set方法从父组件获取数据

@Input()
set OneInput(data)

 console.log(data)

我不想创建一个单独的变量类型let obj= obj1:data1,obj2:data2

请帮忙。

【问题讨论】：

在.ts let object = object1,object2 上创建对象，然后在视图中将该变量用作<child [OneInput]="object"></child>

有没有可能在不接触ts文件的情况下做到这一点？

【参考方案1】：

如果在您的组件上，您指定了 2 个要在模板中传递的变量，那么您可以直接在 [OneInput] 上传递它

父组件

@Component(
   ...,
   template: `<child [OneInput]="userList: users, positionList: positions"></child>`
)
export class ParentComponent 

   users = ['user1', 'user2'];
   positions = ['position1', 'position2'];

子组件

@Component(...)
export class ChildComponent 

   @Input()
   set OneInput(userList, positionList)     // You can use data or you can destructure it to directly access the objects without having to data.userList and data.positionList
      console.log(userList, positionList)