如何将多个属性绑定到Angular 5组件?

问题描述

我有一个带有模板的组件工具栏:

I have a component toolbar with template:

<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做到这一点?

I want to bind an array of item.options to an A element. How to do it with Angular 5?

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

推荐答案

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

I expect you could create a directive that would store and assign dynamic attributes to an element but I've not tested it.

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>

这篇关于如何将多个属性绑定到Angular 5组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！