Angular2中的共享单选按钮组件

Posted

技术标签:

【中文标题】Angular2中的共享单选按钮组件【英文标题】:Shared RadioButton Component in Angular2 【发布时间】:2017-07-17 21:55:29 【问题描述】:

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

我有三个共享组件,但我不知道如何区分它们。我的意思是,如果我处理第一个,我不希望其他 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="radioAB" value="selected" [(ngModel)]="option">
        <label>Send Selected</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="radioAB" 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="radioAB"

【问题讨论】:

您是否为组件定义了输入?如果您共享您的组件并希望在使用共享组件时有所作为,您需要定义一些输入以使其与众不同。比如你想要不同的组件名称,你需要为名称定义输入,并将输入绑定到视图。 我不明白你,因为我有一个独特的组件共享3次,所以我不能给他们定义一个“id”。我对变量布尔值进行了输入。 能否展示一下你的独特组件的代码以及你的组件的用途? 【参考方案1】:

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

无论如何,我都会做以下事情之一:

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

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

更新:

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

【讨论】:

我认为发帖者遇到了来自不同共享组件的单选按钮组的问题,如果它们具有相同的名称,则它们共享相同的状态。省略名称如何防止这种情况发生? 我刚刚测试过它并没有。唯一的解决方案(据我所知)是为分组按钮生成唯一名称

以上是关于Angular2中的共享单选按钮组件的主要内容,如果未能解决你的问题,请参考以下文章

Angular2 ReactiveFormsControl:如何绑定单选按钮?

Angular 2 单选按钮事件

Angular 2单选按钮验证

Angular2,Ionic2:如何使用 ngModel 对嵌套 *ngfor 中的单选按钮进行 2way 绑定?

Angular2 - 单选按钮绑定

取消选择单选按钮 Angular 2?