如何將 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>