Question

我正在使用angularjs 4.3.4通过角度CLI工作正常。但是我的问题很奇怪。我创建了一个带有复选框和标签的自定义组件。 id和for property值来自自定义标记属性。当我看到html代码时，我可以看到它已按预期生成了id和for属性。但是单击标签不会选中或取消选中该复选框。这是我的代码：

input.component.html（选项1）

<div class="form-group input-group">
  <span>
        <input id="{{id}}" type="checkbox" placeholder="Name"/>
        <label for="{{id}}">{{title}}</label>
      </span>
</div>

input.component.html（选项2）

<div class="form-group input-group">
  <span>
        <input bind.id="id" type="checkbox" placeholder="Name"/>
        <label bind.for="id">{{title}}</label>
      </span>
</div>

input.component.html（选项3）

<div class="form-group input-group">
  <span>
        <input [id]="id" type="checkbox" placeholder="Name"/>
        <label [for]="id">{{title}}</label>
      </span>
</div>

input.component.html（选项4）

<div class="form-group input-group">
  <span>
        <input attr.id="id" type="checkbox" placeholder="Name"/>
        <label attr.for="id">{{title}}</label>
      </span>
</div>

上述选项均无效。

input.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'my-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.less']
})
export class InputComponent implements OnInit {
  @Input() title: string;
  @Input() id: string;
  constructor() { }

  ngOnInit() {
  }

}

app.component.html

<my-input title="Testing" id="checkBox"></my-input>

Answer 1

尝试以下解决方案之一：

<label [attr.for]="id">{{title}}</label>
<label attr.for="{{id}}">{{title}}</label>
<label htmlFor="{{id}}">{{title}}</label>

带有一个plunker：https://plnkr.co/edit/RI0bmtX1kceDdd3xt1g6?p=preview

Answer 2

@Vega感谢您的帮助。我想出了我的复选框组件代码出了什么问题。

如果其他人正在寻找同样问题的解决方案，这就是工作示例。

https://plnkr.co/edit/UTXmMEW2jEE1lblnKMuK?p=preview.

要求是使用title和id属性制作自定义复选框组件。

<强>问题下，上面提到的代码工作正常，并使用标题呈现复选框。当你点击复选框的标题时应检查复选框，但它没有。

原因：自定义输入组件中的 id 属性是html标记属性/属性，即使它是自定义组件并且已定义了自己的id属性。由于 id 是HTML属性，因此angular会忽略它，并且不会将其传输到自定义组件输入属性。

解决方案1 ：在自定义组件中将输入属性 id 更改为 myid

<my-input title="Does Work" myid="checkbox2"></my-input>

解决方案2 ：将自定义组件的 id 属性作为单向数据绑定传递

正确的方式 检查我传递id值的方式

<my-input title="Does Work" [id]="'checkbox2'"></my-input>

错误的方式

<my-input title="Does Work" [id]="checkbox2"></my-input>
<my-input title="Does Work" id="checkbox2"></my-input>

我希望这能帮助像我这样的人。

RIY

Angular 4x标签不起作用

2 个答案: