我想在同一页面上重用我的组件,但我在定义单选按钮的值时遇到问题,具体取决于我正在处理的单选按钮。
我有三个共享组件,但我不知道如何区分它们。我的意思是,如果我处理第一个组件,我不希望其他两个组件被修改。 我使用“激烈”模式解决了这个问题,并且我想做得更好。任何建议将不胜感激。
这是我的 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,它们是 bool 值,但我认为这是一个不好的解决方法。
他的组件中的变量是:
@Input() A: boolean;
@Input() B: boolean;
@Input() C: boolean;
private option: string = 'selected';
有什么方法可以改进这个解决方案吗? :
name="radio{{A}}{{B}}"
最佳答案
有点不清楚 A、B 和 C 的用途,但仅使用 2 个 bool 值将严重限制您可以使用的唯一可能实例的数量。
无论如何,我会执行以下操作之一:
创建一个服务,为组件的每个实例生成唯一的
名称
,组件将调用OnInit
,并在其剩余的生命周期中存储该名称(当然你可以回收OnDestroy
)。添加另一个
@Input
作为单选组的名称,并让组件的使用者决定如何命名该组。
更新:
我刚刚注意到您不必使用 name=
属性,您可以省略它,当使用 [(ngModel)] 绑定(bind) radio 输入时,Angular 会自动对它们进行分组
code> 到同一个“东西”。
关于angular - Angular2 中的共享 RadioButton 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42483161/