Angular2、ZoneJS、外部で変更されたDOM

Question

Angular2 RC1 Webアプリケーション内で外部から変更されたDOMに関する助けが必要です。シナリオは単純です：私はこの

<div id="my-svg-canvas"></div> 

typescriptedコンポーネントのようなIDと空のdivが含ま応じたテンプレートを持つコンポーネントを持っている含まれているプレーンなJSファイルから関数をトリガーngOnInitメソッドを持っていますindex.htmlのscript-tagを介してこの関数はSVGを上記の "div"タグに表示します。 SVGには、コンポーネント内のいくつかのメソッドを参照するオン・クリック・ディレクティブを含むいくつかのa要素が含まれています。

これは、SVGが完全に書かれた後、$ scope。$ apply（）を呼び出した後、Angular1でうまくいきました。今、Angular2では、私のコンポーネント内のそれぞれのメソッドがトリガされません。

私は知っている、ZoneJSは今DOMの変更を検出する責任があります。私はこれがAngular-managedコンポーネントの内部でレンダリングされたDOM全体に対して自動的に行われることを期待していました。次の試みは、このように、私のコンポーネントでNgZoneを注入し、明示的にその中のレンダリング機能を実行することでした：

ngOnInit() { 
    this.ngZone.run(() => {renderSVG(this.myData, "my-svg-canvas");}) 
} 

ません成功のいずれか： - ：問題以来、/また、私はMutationObserver（Angular2 Directive: How to detect DOM changesこのスレッドを参照してください）に登録私と少し似ていました。しかし、どちらも解雇されていません。

私はどこを探すべきかわかりません。

注：SVGレンダリングフレームワークが無効な属性の設定を拒否したため、「（クリック）」ではなく「オンクリック」を使用する必要がありました。明らかに、括弧で始まる属性はHTMLでは問題ありませんが、XMLでは正しくありません。しかし、両方の指令が完全に交換可能であるため、これは問題ではありません。

PS：

と呼ばれるレンダリング方法がSVG.jsフレームワークを利用し、次のようになります。

function renderSVG(dataParam, elementIdParam) { 
    draw = SVG(elementIdParam).spof(); 
    initAndPaint(draw, dataParam); 
    return draw; 
} 

そして

<a id="SvgjsA1033" on-click="showVal('W1')" class="union"> 

libにSVG.jsによって生成されたタグ

生成されたSVGコードをテンプレートに貼り付けると、すべて正常に動作します。

Answer 1

私はAngularが動的に追加されたHTMLを解析すると考えています（Angular2 - catch/subscribe to (click) event in dynamically added HTML参照）。

renderSVG()を呼び出した後は、DOMをトラバースして新しく追加されたa要素を見つけて、手動で追加して後で削除する必要があります。

Dynamically add event listener in Angular 2を参照してください。

さらに複雑なアプローチについては、Equivalent of $compile in Angular 2を参照してください。

Answer 2

私はあなたのコンポーネントのngAfterViewInitフックメソッドにコードを移動します：

<div #mySvgCanvas"></div> 

と

@ViewChild('mySvgCanvas') 
mySvgCanvasElt: ElementRef; 

ngAfterViewInit() { 
    var elt = this.mySvgCanvasElt.nativeElement; 

：またあなたが ViewChildデコレータを使用してDOM要素を参照する必要があります

ngAfterViewInit() { 
    this.ngZone.run(() => {renderSVG(this.myData, "my-svg-canvas");}) 
} 

ゾーンを明示的に使用するとは思わないここに必要です...

Answer 3

受理された回答の中でDynamicLoaderComponentを使用して解決策にマークするRajcokのリンク（「もっと複雑なアプローチ」を参照）。このスレッドのクローズとして、これは私の実装です：

constructor(private loader: DynamicComponentLoader, private injector:Injector) {} 

ngAfterViewInit() { 
    let tournamentCanvas = document.createElement("canvas"); 
    renderKOTournamentSVG(this.tournament, tournamentCanvas); 

    @Component({ 
    selector: 'canvas-component', 
    template: tournamentCanvas.outerHTML)} 
    class CanvasComponent {} 

    this.loader.loadAsRoot(CanvasComponent, "canvas-component", this.injector); 
}