我执行d3JS追加时未调用Angular2组件

Question

我的d3JS和Angular2组件有问题。

我想将我的角度分量用于d3生成的代码。

例如，我有根角度分量：

import { Component, OnInit } from '@angular/core';
import { ChildDirective } from './child.directive';
import * as d3 from 'd3';

@Component({
  selector: 'root',
  template: `<svg></svg>`,
  directives: [ ChildDirective ],
})

export class rootComponent implements OnInit {

  constructor(private el: ElementRef) {
  }

  public ngOnInit() {
    d3.select(this.el.nativeElement).selectAll('svg').append('g').attr('child', '');
  }
}

我有孩子指令

import { Directive } from '@angular/core';

@Directive({
  selector: '[child]'
})

export class ChildDirective {
  constructor() {
    console.log('I"m alive! Hello world!');
  }
}

不幸的是，我没有看到控制台日志，但是在DOM中，我拥有该元素

<svg _ngcontent-vja-4="" class="calendar">
  <g child=""></g>
</svg>

为什么angular2不响应我的元素？ 以及我该如何解决？

Answer 1

Angular不会为动态添加的HTML创建组件或指令。 与组件或指令选择器匹配的HTML必须静态添加到父组件模板。

要动态添加组件，可以使用ViewContainerRef.createComponent()

有关具体示例，请参见带有用户单击所选组件的Angular 2动态选项卡

Answer 2

在这种特殊情况下，我将使用以下内容：

@Component({
  selector: 'root',
  template: `
    <svg>
      <g child></g>
    </svg>
  `,
  directives: [ ChildDirective ],
})
export class rootComponent implements OnInit {
  constructor(private el: ElementRef) {
  }

  public ngOnInit() {
  }
}

否则，该指令将不会被应用...