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

Question

我有一个组件工具栏，模板如下：

<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'} }
]

- Anthony

---

谢谢您的回答。为什么这对您来说似乎很困惑？想象一下具有多个按钮的工具栏：一个按钮触发下拉菜单，另一个按钮触发侧边栏导航。因此，我需要为它们设置不同的数据属性。 - Anthony

选项只是属性吗？如果是的话，就称它们为属性！ - Aluan Haddad

是的，选项只是数据属性。我期望得到一个HTML结果为<a href="someurl" data-target="#target" data-toggle="dropdown">Label</a>。 - Anthony

嗯，从语法上来说Angular不支持这种方式，但是你可以创建一个指令来实现。请修正你的命名。如果你使用了合理的名称，我们本可以节省大量时间。 - Aluan Haddad

我很高兴你修正了名称，现在已经清晰明了得多。我认为事件处理根本没有意义。你试图动态设置属性，我不认为它们是等价的。 - Aluan Haddad

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>

- Aluan Haddad

---

抱歉，无法工作。发生了错误：无法绑定到“dynamicAttributes”，因为它不是“a”的已知属性。该指令已附加在app.module.ts文件的@NgModule声明中。 - Anthony

@karminski 你是否将它添加到了 NgModule 中？因为 Angular 不会进行任何依赖分析（您必须显式地注册所有内容）。指令和组件一样，都应该放在 declarations 中。 - Aluan Haddad

是的，我这样做。如果将“dynamicAttributes”重命名为“appAttributes”，错误就会消失，但属性不会附加到元素。 - Anthony

抱歉，我打错字了。属性的名称和指令需要匹配，现在它们已经匹配了。请使用 [dynamicAttributes]。 - Aluan Haddad

好的。它被渲染为 <a _ngcontent-c1="" ng-reflect-dynamic-attributes="[object Object]" href="#">标签</a> :) - Anthony

我不明白，请提供更多上下文。 - Aluan Haddad