本文介绍了如何将多个属性绑定到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组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!