Question

我正在为切换按钮创建组件。样式取决于输入标签，因此我需要使用id和for。

如果我在页面上有多个这些组件，那么显然会搞砸......最好的方法是什么？通过函数随机生成id？

<div class="toggle-group checkbox-group-inline btn btn-link">
  <input class="tgl tgl-light" id="toggle" type="checkbox" [checked]="value" (change)="stateChange($event.target.checked)">
  <label class="tgl-btn" for="toggle"></label>
</div>

Answer 1

使用index on：

<div *ngFor="let item of items; let i = index" class="toggle-group checkbox-group-inline btn btn-link">
  <input class="tgl tgl-light" id="toggle_{{i}}" type="checkbox" [checked]="value" (change)="stateChange($event.target.checked)">
  <label class="tgl-btn" for="toggle_{{i}}"></label>
</div>

Answer 2

这似乎是动态id的有效用例，因为将label与input s关联的正确方法是通过id s。

为此，请向您的类添加一个randNum属性，其中包含在实例化时创建的随机数。然后，您可以在整个模板中使用此随机数来创建唯一标识符，如下所示：

随机数（类属性）

randNum = Math.floor(Math.random() * 1000000000);

<强>模板

<div class="toggle-group checkbox-group-inline btn btn-link">
  <input class="tgl tgl-light" [id]="'toggle' + randNum" type="checkbox" [checked]="value" (change)="stateChange($event.target.checked)">
  <label class="tgl-btn" [for]="'toggle' + randNum"></label>
</div>

现在，如果您在同一页面上有10次此组件，那么组件的10个实例将具有唯一值randNum，从而产生所需的效果。

修改

如果你宁愿远离随机数，你可以通过定义静态属性作为randNum的基础来确保唯一性，如下所示：

static num = CustomComponent.num || 0; randNum = ++CustomComponent.num;

在上面的代码中，每个组件都保证具有唯一的randNum，因为它为每个实例化递增。

角度输入组件重复ID

2 个答案: