如何将多个属性绑定到 Angular 5 组件？答案

【问题标题】：How to bind multiple attributes to Angular 5 component?如何将多个属性绑定到 Angular 5 组件？
【发布时间】：2018-09-20 22:16:39
【问题描述】：

我有一个带有模板的组件toolbar：

<div *ngFor="let item of items" class="toolbar__item">
  <a href="{{ item.url }}" [attributes]="item.attributes">{{ item.label }}</a>
</div>

我想将item.options 的数组绑定到A 元素。如何用 Angular 5 做到这一点？

const items = [
  { 'url': 'someurl', 'label': 'Label', 'attributes': {'data-target': '#dropdown', 'data-toggle': 'dropdown'} }
]

【问题讨论】：

您可以创建一个Directive。锚通常不具有任何此类属性。但是，这似乎令人困惑，我建议您考虑一下您想要它的原因。或者...您是否尝试在目标上动态设置相应的属性？目前还不清楚。
感谢您的回答。为什么它让你感到困惑？想象一个带有多个按钮的工具栏：一个按钮触发下拉菜单，另一个触发侧边栏导航。所以我需要为它们设置不同的数据属性。
所以选项只是属性？如果是，就称它们为属性！
是的，选项只是数据属性。我希望得到的结果 HTML 为 <a href="someurl" data-target="#target" data-toggle="dropdown">Label</a>
嗯，Angular 在语法上不支持这种方式，但您大概可以创建一个以这种方式工作的指令。请修正您的命名。如果您使用合理的名称，我们可以节省大量时间。

标签： angular data-binding

【解决方案1】：

我期望您可以创建一个指令来存储动态属性并将其分配给元素，但我尚未对其进行测试。

import {Directive, ElementRef, Input} from '@angular/core';

@Directive({
  selector: '[dynamicAttributes]'
})
export class DynamicAttributesDirective {
  @Input() dynamicAttributes: {[key: string]: string};

  constructor(public element: ElementRef<HTMLElement>) {}

  ngOnInit() {
    Object.assign(this.element.nativeElement.attributes, this.dynamicAttributes)
  }
}

你会按如下方式消费它

<a href="{{item.url}}" [dynamicAttributes]="item.attributes">{{item.label}}</a>

【讨论】：

对不起，不起作用。发生错误：无法绑定到“dynamicAttributes”，因为它不是“a”的已知属性。指令已附加在 app.module.ts 文件的@NgModule 声明中
@karminski 你把它加到NgModule了吗？您必须这样做，因为 Angular 不进行任何依赖分析（您必须显式注册所有内容）。指令，如组件，进入declarations。
是的，我就是这么做的。如果将dynamicAttributes 重命名为appAttributes，则错误消失，但属性不会附加到元素。
抱歉，打错了。属性的名称和指令需要匹配，现在它们匹配了。使用[dynamicAttributes]。
好的。它呈现为<a _ngcontent-c1="" ng-reflect-dynamic-attributes="[object Object]" href="#">Label</a> :)