角度2通過輸入裝飾器消耗多個屬性

我有這個組件通過它的選擇器接收兩個輸入，但是這可以擴展到任意數量的輸入和任何組件。所以，爲了消耗組件本身中的多個屬性，一個@Input()裝飾器不允許我使用多個屬性，所以作爲一種解決方法，我使用了兩個裝飾器來處理兩個輸入屬性，但我認爲這不是唯一的方法解決這種情況。角度2通過輸入裝飾器消耗多個屬性

export class AsyncComponent { 
    @Input() waitFor: boolean; 
    @Input() message: string; // TODO: Verify if multiple inputs are needed for multiple props 
}

更新

<app-async [waitFor]="true" message="foo"><app-async>

因此，是可以與任何其他方式只使用一個單一的裝飾爲任意數量的輸入道具？如果除了waitFor和message之外還有更多的道具，我必須爲每個道具執行以下操作。

@Input() waitFor: boolean; 
@Input() message: string; 
@Input() someOtherProp: string; 
....

或有任何其他方式只是有一個Input裝飾和使用任意數量的屬性？

來源

2017-02-25 Umair

爲什麼你想要一個單一的輸入，單一的輸入是單一的值。 –

@RomanC，讓我們說我正在向組件傳遞10個道具，這是否意味着我必須在組件本身中包裝裝飾器10次？ – Umair

換裝修10次？不，它不以這種方式工作。 –

我與羅馬C.同意

我只是想傳遞一個對象（而不是數組），包含所有的道具：

@Component({ 
    selector: 'app-async' 
}) 
export class AsyncComponent { 
    // Single object with all props. 
    @Input() props: { waitFor: boolean; message: string; }; 
}

然後父組件：

@Component({ 
    template: '<app-async [props]="myProps"><app-async>' 
}) 
export class ParentComponent { 
    myProps = { waitFor: true, message: 'foo' }; 
}

注意。請注意，在輸入屬性上聲明的接口不是強制的。最好還是聲明它們，但JavaScript不能運行時檢查TypeScript接口。此註釋適用於此線程中的所有代碼示例（單個輸入，多個輸入...）。

來源

2017-02-25 11:38:04 AngularChef

謝謝。我對另一個答案感到困惑。 – Umair

不客氣。 :) – AngularChef

順便說一句我剛剛看到你的界面使用說明和它不完全可以理解我。你能否請解釋一下更多？ – Umair

這是不可能的，如果你需要多個值使用數組或東西

export class AsyncComponent { 
    @Input() props: any[];

來源

2017-02-25 10:27:20

我認爲我的問題存在一些困惑。我非常感謝你的回答，但我已經對這個問題進行了一些更新，使其更加清晰。 – Umair

角度2通過輸入裝飾器消耗多個屬性

回答

相關問題