共享單選按鈕組件在Angular2

我想在同一個頁面重用我的組件，但是我必須定義依賴於一個我的工作我的單選按鈕值的問題。共享單選按鈕組件在Angular2

我有三個共享組件，我不知道該怎麼做給他們的區別。我的意思是，如果我在第一個工作，我不希望其他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}}"

來源

2017-02-27 XGuy

有你的組件定義的輸入？如果你分享你的組件，並希望在使用你的共享組件時有所作爲，你需要定義一些輸入來使它不同。例如，您需要組件的不同名稱，您需要爲名稱定義輸入，並將輸入綁定到視圖。 –

我不理解你，因爲我有一個共享3次的獨特組件，所以我無法爲它們定義一個「id」。我對變量布爾變量進行了輸入。 – XGuy

你能否顯示你的代碼獨特的組件和你的組件的用法？ –

這是一個有點不清楚什麼目的A，B和C的發球局，但只使用2布爾將嚴重限制，你可以使用唯一的可能實例的數量。

無論如何，我會做下列之一：

創建服務生成唯一name S爲組件的每個實例，它的組件將在OnInit打電話，和商店的其餘部分的終生（當然你可以回收OnDestroy）。
添加另一個@Input單選組的名稱，讓部分消費者決定如何命名該組。

UPDATE：

我只注意到你沒有使用name=屬性，你可以省略，角自動分組無線輸入的時候都用[(ngModel)]相同的約束「的東西」。

來源

2017-02-27 13:46:00 Amit

我認爲這張海報正遇到來自共享相同狀態的不同共享組件的單選按鈕組的問題（如果它們具有相同的名稱）。如何省略名稱防止這種情況發生？ – RMuesi

共享單選按鈕組件在Angular2

回答

相關問題