javascript - 将 host 属性添加到生成的 DOM 元素

Question

我正在尝试集成 d3 和 angular2 alpha.37(从 here 开始)。我目前遇到的问题是生成的 DOM 元素没有获得在模拟样式 View 封装中使用的属性，因此如果不将元素的 View 封装设置为 None(或 native ，但我无法设置它们的样式宁愿使用模拟)。

我设法以编程方式从组件 [1] 内的元素中提取所需的属性，然后将其添加到生成的元素中 [2]，这确实有效，但这显然是令人难以置信的 hacky:

import {Component, View, Attribute, ElementRef, LifecycleEvent} from 'angular2/angular2';

import d3 from 'd3';

@Component({
  selector:   'bar-graph',
  properties: [ 'data' ]
})
@View({
  template: '<div class="chart"></div>',
  styles: [`.chart {
    background: #eee;
    padding: 3px;
  }

  div.bar {
    width: 0;
    transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
  }

  div.bar {
    font: 10px sans-serif;
    background-color: steelblue;
    text-align: right;
    padding: 3px;
    margin: 5px;
    color: white;
    box-shadow: 2px 2px 2px #666;
  }`]
})
export class BarGraph implements LifecycleEvent.OnChanges {
  data: Array<number>;
  divs: any;
  constructor(elementRef: ElementRef, @Attribute('width') width: string, @Attribute('height') height: string) {


    var el:any    = elementRef.nativeElement;
    var graph:any = d3.select(el);

    this.hostAttr = graph[0][0].children[0].attributes[1].name; //hack here [1]

    this.divs = graph.
      select('div.chart').
      style({
        'width':  width  + 'px',
        'height': height + 'px',
      }).
      selectAll('div.bar');

  }

  render(newValue) {
    if (!newValue) return;

    this.divs.data(newValue)
        .enter().append('div')
          .classed('bar', true)
          .attr(this.hostAttr, true) //add the attribute here [2]
          .style('width', d => d + '%')
          .text(d => d + '%');

  }

  onChanges() {
    this.render(this.data);
  }

}

是否有推荐的方法来处理这类事情(或者我应该停止在 Angular2 之外修补 DOM)？

Answer 1

(目前)还不是一个完整的答案，但也许有一些有用的信息可以帮助找到解决方案:

• 该问题在 beta.8 中仍然存在。将 View 封装设置为 None 并使用全局样式是我可以开始工作的唯一解决方案。使用 Native 似乎根本没有向 DOM 添加任何元素，但我必须进行更多测试才能找出原因。
• OP 提出的 hack 可行，并且可以重构为合理的解决方案，至少在我看来是这样。
• 在 d3.js 的特定情况下，引入由库内部创建的元素时，事情会变得更加棘手，例如通过 d3.svg 命名空间中的方法。毫无疑问，也可以找到解决方法。
• 不过，我相信这个问题比 d3 更大。有很多库都有自己的 DOM 生成/操作机制，认为其中一部分会在某个时候集成到某些或其他 angular2 应用程序中并非不切实际。从这个意义上说，令人惊讶的是，这个问题似乎还没有出现(或者这周我的谷歌能力特别弱)。

就解决方案而言，这是我目前正在考虑的两种方法，以防万一没有人想出更好的方法:

1. 实现某种遍历部分 DOM 树并设置样式范围属性的后处理器。也许作为指令？
2. 按照提示尝试装饰渲染器 here .