2017-12-08 10 views
1

現在、私はangular2アプリケーションを開発中です。カスタムコンポーネントにhtml属性を追加する方法を知りたい。anglejs2のカスタム子コンポーネント

たとえば、カスタムドロップダウンコンポーネントがあり、同じページで多くの場所で再使用しているとします。私はマルチセレクションとしていくつかのドロップダウンを開発したいと思っていて、それらのうちのいくつかはシングルセレクトです。どうすればそれを教えてください。コンポーネントテンプレートにmutipleを追加すると、すべてのドロップダウンに対して複数選択が表示されます。使用している各コンポーネントを個別に追加すると、その「複数の」属性を理解できません。

+0

Plaseをチェックチェックし、このオープンソースコンポーネントng-select

を選択し、これまでに試したコードを追加しますか? –

+0

、 "dropdown"カスタムコンポーネントを作成しました。カスタムコンポーネントにHTML "multiple"属性を追加する方法を教えてください。私たちは以下のように通常のHTMLドロップダウンのためにどのように使用するかのように: <オプション値=「ボルボ」>ボルボ <オプション値=「サーブ」>サーブ <=「フィアット」オプション値>フィアット を <複数選択>を Johnson

+0

@AnandGhaywankar – Johnson

答えて

3

マルチセレクションといくつかのドロップダウンを開発したい場合は、 を選択してください。その方法を教えてください。あなたのカスタムコンポーネントに定義されたブール@Inputデコレータを使用する必要があります

(質問が不明瞭ようで、私はあなたがマルチ選択し、選択し、単一の実装ロジックを要求していなかったと仮定しています)。以下は、カスタムコンポーネントのmultiselectチェックを追加し、カスタムHTMLクラスでカスタムcomponent.tsクラス

@Input() multiple: boolean = false; 

でカスタムコンポーネント

をレンダリングするとき、親がその属性に値をバインドする方法の例を示します親HTMLで

<div *ngIf="!multiple"> 
// render your single select html 
</div> 

<div *ngIf="multiple"> 
//render your multiple select html 
</div> 

カスタムコンポーネントをレンダリング中(コンポーネントの名前としてセレクタをassumpe)

// for multi select 
<selector [multiple]=true> </select> 
// for single select 
<selector [multipl]=false> </select> 

ご支援汎用コンポーネントを作るのに苦労シングルとマルチの両方の場合は、angular2に@Input@Outputデコレータには考えている場合は、このarticle

関連する問題