Angular2

时间:2017-02-27 10:20:15

标签: angular data-binding radio-button components shared

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

我有三个共享组件,我不知道怎么做才能区分它们。我的意思是,如果我在第一个工作,我不希望其他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}}"

1 个答案:

答案 0 :(得分:1)

有点不清楚A,B和C的用途是什么,但仅使用2个布尔值会严重限制您可以使用的唯一可能实例的数量。

无论如何,我会做以下其中一项:

  • 创建一个服务,为组件将在name上调用的组件的每个实例生成唯一的OnInit,并在其生命的剩余时间内存储(当然,您可以回收OnDestroy)。

  • 为广播组的名称添加另一个@Input,让该组件的消费者决定如何命名该组。

<强>更新

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