共享单选按钮组件在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

回答

相关问题