d3JSを追加したときにAngular2コンポーネントが呼び出されない

Question

d3JSとAngular2コンポーネントに問題があります。

d3で生成されたコードに角度成分を使用したいと考えています。例えば

私は根の角度compoenntあります

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

は、私は、この特定の場合に次のように使用する参照の具体的な例についてViewContainerRef.createComponent()

を使用することができ、動的にコンポーネントを追加するには適用...

Answer 2

Angularは、動的に追加されるHTML用のコンポーネントまたはディレクティブを作成しません。コンポーネントまたはディレクティブセレクタと一致するHTMLは、親コンポーネントテンプレートに静的に追加する必要があります。そうでない場合ディレクティブはなりません

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

    public ngOnInit() { 
    } 
} 

：

あなたはAngular 2 dynamic tabs with user-click chosen components