共用RadioButtonコンポーネントAngular2

Question

同じページでコンポーネントを再利用したいのですが、作業中のラジオボタンの値を定義するのに問題があります。

私は3つの共有コンポーネントを持っていますが、私はそれらをどのように相違させるのか分かりません。私が最初に作業する場合、他の2つのコンポーネントが変更されることは望ましくありません。 私は "徹底的な"モードを使って解決しました。私はそれをより良くしたいと思います。どんな提案も感謝します。ここで

は私のhtmlコードです：

<div class="ui form"> 
    <div class="inline fields"> 
    <label for="fruit">Send to:</label> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
     <input type="radio" name="radio{{A}}{{B}}" value="selected" [(ngModel)]="option"> 
     <label>Send Selected</label> 
     </div> 
    </div> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
     <input type="radio" name="radio{{A}}{{B}}" value="all" [(ngModel)]="option"> 
     <label>Send All</label> 
     </div> 
    </div> 
    </div> 
</div> 

私がやっている方法は、ブール値である、値AとBを宣言することですが、私はそれを解決するための悪い方法だと思います。彼のコンポーネントから

変数は次のとおりです。

@Input() A: boolean; 
@Input() B: boolean; 
@Input() C: boolean; 
private option: string = 'selected'; 

は、このソリューションを改善する方法はありますか？ ：

name="radio{{A}}{{B}}" 

Answer 1

それはA、BおよびCがサービスを提供するどのような目的ビットは不明だが、深刻なあなたが使用できるユニークな可能インスタンスの量を制限するだけで2ブール値を使用して。

かかわらず、私は次のいずれかの操作を行います。

• コンポーネントがOnInit時に呼び出すコンポーネントのインスタンスごとに固有name Sを生成するサービスを作成し、その残りの保管生涯（もちろんあなたはOnDestroyをリサイクルすることができます）。

• ラジオグループの名前にもう1つの@Inputを追加し、コンポーネントのコンシューマにグループの名前付け方法を決定させます。

UPDATE：

私はちょうどあなたが、あなたはそれを省略することができname=属性を使用する必要はありません気づいた、角度の自動グループのラジオ入力をそれらが同じに[(ngModel)]を使用してバインドされたときに「もの"