如何为Angular 5组件绑定多个属性？工具栏组件属性绑定求解

在Angular 5里，并没有直接支持把整个属性对象一次性绑定到元素上的内置方式（也就是你写的[attributes]是无效的），不过我们有几种可靠的办法来实现你想要的效果，下面给你详细说明：

方法一：提前转换属性为数组，在模板中循环绑定 #

这种方法适合简单场景，步骤如下：

1. 在组件类中预处理数据 #

在组件的ngOnInit生命周期钩子中，把每个item的attributes对象转换成键值对数组，方便模板循环：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html'
})
export class ToolbarComponent implements OnInit {
  items = [
    { 
      'url': 'someurl', 
      'label': 'Label', 
      'attributes': {'data-target': '#dropdown', 'data-toggle': 'dropdown'} 
    }
  ];

  ngOnInit() {
    // 把attributes转换为键值对数组
    this.items = this.items.map(item => ({
      ...item,
      attrList: Object.entries(item.attributes).map(([key, value]) => ({ key, value }))
    }));
  }
}

2. 更新模板代码 #

在模板中，循环attrList来绑定每个属性：

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

注意：如果你的项目环境中Object.entries不被支持（比如旧版浏览器），可以改用Object.keys来实现：

attrList: Object.keys(item.attributes).map(key => ({ key, value: item.attributes[key] }))

方法二：使用Renderer2手动设置属性 #

如果需要更灵活的控制（比如动态修改属性），可以用Angular的Renderer2服务来操作DOM元素：

1. 组件类代码 #

import { Component, OnInit, AfterViewInit, QueryList, ViewChildren, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html'
})
export class ToolbarComponent implements OnInit, AfterViewInit {
  items = [
    { 
      'url': 'someurl', 
      'label': 'Label', 
      'attributes': {'data-target': '#dropdown', 'data-toggle': 'dropdown'} 
    }
  ];

  // 获取所有的a标签元素
  @ViewChildren('toolbarLink') toolbarLinks: QueryList<ElementRef>;

  constructor(private renderer: Renderer2) { }

  ngAfterViewInit() {
    // 遍历每个链接，设置对应的属性
    this.toolbarLinks.forEach((linkEl, index) => {
      const currentAttrs = this.items[index].attributes;
      Object.entries(currentAttrs).forEach(([key, value]) => {
        this.renderer.setAttribute(linkEl.nativeElement, key, value);
      });
    });
  }
}

2. 模板代码 #

给每个a标签添加模板引用变量#toolbarLink：

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

这两种方法都能完美实现你想要的效果，根据你的实际场景选择即可。

内容的提问来源于stack exchange，提问作者Anthony