Question

我想在同一页面重用我的组件，但我有问题根据我正在处理的那个来定义我的Radio Buttons的值。

我有三个共享组件，我不知道怎么做才能区分它们。我的意思是，如果我在第一个工作，我不希望其他2个组件被修改。我解决了使用＆＃34;激烈的＆＃34;模式，我想做得更好。任何建议将不胜感激。

这是我的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个布尔值会严重限制您可以使用的唯一可能实例的数量。

无论如何，我会做以下其中一项：

创建一个服务，为组件将在name上调用的组件的每个实例生成唯一的OnInit，并在其生命的剩余时间内存储（当然，您可以回收OnDestroy）。
为广播组的名称添加另一个@Input，让该组件的消费者决定如何命名该组。

<强>更新

我刚注意到你不必使用name=属性，你可以省略它，当使用[(ngModel)]将无线电输入绑定到同一个＆＃34;时，angular会自动对无线电输入进行分组。东西＆＃34;

Angular2

1 个答案: