Angular2中的共享单选按钮组件

Question

我想在同一页面重用我的组件，但是我无法根据我正在处理的单选按钮来定义我的单选按钮的值。

我有三个共享组件，但我不知道如何区分它们。我的意思是，如果我处理第一个，我不希望其他 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 的每个组件实例生成唯一的names，并在其剩余生命周期内存储（当然您可以回收OnDestroy )。

• 为无线电组的名称添加另一个@Input，并让组件的使用者决定如何命名该组。

更新：

我刚刚注意到您不必使用name= 属性，您可以省略它，当无线电输入使用[(ngModel)] 绑定到同一个“事物”时，Angular 会自动将它们分组。