Angular 角形4x标签，适用于不'；行不通_Angular

Angular 角形4x标签，适用于不'；行不通

angular

Angular 角形4x标签，适用于不'；行不通,angular,Angular,我通过AngularCLI使用angularjs 4.3.4，运行良好。然而，我遇到了一个奇怪的问题。我已经创建了一个带有复选框和标签的自定义组件。id和for属性值来自自定义标记属性。当我看到html代码时，我可以看到它已经按照预期生成了id和for属性。但点击标签并不会选中或取消选中复选框。这是我的密码： input.component.html（选项1） app.component.html 尝试以下解决方案之一： <label [attr.for]="id">{{title}

我通过AngularCLI使用angularjs 4.3.4，运行良好。然而，我遇到了一个奇怪的问题。我已经创建了一个带有复选框和标签的自定义组件。id和for属性值来自自定义标记属性。当我看到html代码时，我可以看到它已经按照预期生成了id和for属性。但点击标签并不会选中或取消选中复选框。这是我的密码：

input.component.html（选项1）

app.component.html

尝试以下解决方案之一：

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

{{title}
{{title}}
{{title}}

使用plunker:

尝试以下解决方案之一：

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

{{title}
{{title}}
{{title}}

砰的一声：

@Vega谢谢你的帮助。我发现我的checkbox组件代码有什么问题

如果其他人正在寻找相同问题的解决方案，这里是一个工作示例

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>

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

Riy