angular - 如何将多个属性绑定(bind)到 Angular 5 组件？

Question

我有一个组件 toolbar带模板:

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

我想绑定(bind)一个数组 item.options到 A元素。如何使用 Angular 5 做到这一点？

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

Answer 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>