如何将 Object 从父模板传递给子组件

Question

我有一个看起来像这样的界面

export interface IDropdownOption {
  guid: string;
  width: string;
  isRequired: false;
  fieldText: string;
  selectedItem: string;
}

在我的子组件中，我定义了一个像这样的输入@Input() compInfo: IDropdownOption; 然后在我的父模板中我使用这样的客户端

<app-ig-dropdown
        compInfo.guid="820E04E0-8084-4D9C-A268-D8C0D21E74F6"
        compInfo.width="200px"
        formControlName="combo1"
        compInfo.fieldText="Social Media">
</app-ig-dropdown>

这样做总是会产生错误，即 object compInfo 中定义的任何这些值的属性未定义。 甚至可以使用 Object 作为@input，然后从父模板设置值吗？ 我试图避免声明 50 + 输入，因为我可能在父组件上有 10 个子组件，每个子组件有 5 个参数。 如果这不受支持，我还能如何让它更干净？

Answer 1

最终，我能够通过像这样在我的父模板中分配值来解决这个问题。

<app-ig-dropdown
       [compInfo]="{guid :'820E04E0-8084-4D9C-A268-D8C0D21E74F6',
                    width:'350px',
                    placeHolder: ' -- Select --',
                    fieldText:'Social Media 1'}"
        formControlName="combo1"
        >
</app-ig-dropdown>
<app-ig-dropdown
        [compInfo]="{guid :'820E04E0-8084-4D9C-A268-D8C0D21E74F6',
                    width:'350px',
                    placeHolder: ' -- Select --',
                    fieldText:'Social Media 2'}"
        formControlName="combo2"
>
</app-ig-dropdown>