如何将组件ID绑定为模板内HTML元素的父相对路径答案

【问题标题】：How to bind component id as parent relative path to HTML element inside template如何将组件ID绑定为模板内HTML元素的父相对路径
【发布时间】：2016-06-15 01:35:06
【问题描述】：

我正在使用 Angular2 RC1 版本和 Material Design Lite。
我将实现一个独立的网格组件。一个名为 Id 的自定义属性用于标识组件。

export class GridComponent {

  @Input() public id: string;

}

当我将 Id 属性绑定到 UL 标记的“for”属性时，我遇到了问题。就像下面的代码sn-p：

<button class="mdl-button" id="{{id}}-viewColumn">
    <i class="material-icons">view_column</i>
</button>

<ul class="mdl-menu" for="{{id}}-viewColumn">
    <li *ngFor="xxx">
    </li>
</ul>

然后错误提示“无法绑定到 'for'，因为它不是已知的本机属性”。
但我必须使用“UL”标签。上面的“UL”代码在https://getmdl.io/components/#menus-section 之后。
我想知道您将如何处理这种情况？
提前谢谢你。

【问题讨论】：

for 是<label> 的属性。你想用这个做什么？如果要添加自定义属性，则必须创建自己的组件，该组件将包含并应用更改到它自己的 <ul>。
@ps2goat，感谢您的回复。由于我使用 Material Design Lite 作为 UI 框架，我想我必须遵循getmdl.io/components/#menus-section 提供的代码示例。
这里似乎受到MDL的限制，我必须使用'UL'标签是正确的吗？

标签： javascript html angular material-design-lite

【解决方案1】：

显然必须将其添加为属性而不是属性。

使用

<ul [attr.for]="id"

或

<ul attr.for="{{id}}"

【讨论】：

感谢您的回复。
两者都做同样的事情。 {{id}} 绑定了id 的字符串化值，但属性无论如何只能保存字符串，因此[attr.for]="id" 具有相同的最终结果。如果您绑定到一个属性并且id 不是字符串，那么for="{{id}}" 和[for]="id" 会有所不同，因为只有后者传递了不变的值。

【解决方案2】：

原生元素上没有 for 属性。你可以在 ul 中添加标签吗？ <label [attr.for]="{{id}}-viewColumn">。

【讨论】：

是的。众所周知，属性'for'通常用于'label'。但在这种情况下，我认为我必须使用“UL”。请查看getmdl.io/components/#menus-section。这里似乎受到 MDL 的限制。