2017-01-10 1 views
0

私はこのAngular2コンポーネントの書式設定オプションを渡すにはどうすればよいですか?

@Component({ 
    selector: "generic-select", 
    template: ` 
<select [(ngModel)]="target"> 
    <option *ngIf="target" hidden selected>{{target}}</option> 
    <option *ngFor="let c of choices">{{c}}</option> 
</select> 
` 
}) export class SelectorComponent<T> { 

    @Input() 
    private choices: T[]; 

    @Input() 
    private target: T; 
} 

のような非常に単純なコンポーネントを持っており、Tは常に文字列や数値などのプリミティブオブジェクトではありませんが、複雑なオブジェクトであるという問題が、あります。ですから、そのような場合、私はTのプレビューがどのように見えるかを示す何かを(私は実際には何も知らない)渡したいと思います。

私はまさにあなたが尋ねたが、これは問題の潜在的な解決策である

<generic-select [choices]="choices" [target]="user.choice" [formatter]="(t:T) => t.name"></generic-select> 
+0

どのように使用しますか?おそらく、より良い解決策はtransclusionを使用するでしょうか? – yurzui

答えて

1

好きではないなめらかたい:

あなたは活字体を使用している場合は、classes that extend other classesを作成することができます。表示値フィールドの規則を持つことでOKだった場合は、共通の基本クラスでこのプロパティを使用し、汎用タイプの代わりにこのプロパティを使用できます。

明らかにプリミティブ型で作業するには、クラスでラップする必要があります。

プリミティブとカスタムタイプの両方をサポートしたい場合は、コンポーネントに2つのオプションの入力属性(すべてのプリミティブ用)と共通クラスタイプ用の入力属性(2つ)を追加する方法があります。次に、テンプレートに、入力が提供された値に基づいて値が表示されます。

関連する問題