Angularjs Angular2、ZoneJS和外部更改的DOM

我需要一些关于Angular2 RC1 web应用中外部更改的DOM的帮助。场景很简单：我有一个组件，它有一个相应的模板，其中包含一个ID如下的空div

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

也没有成功：-/此外，我注册了一个MutationObserver，请参阅此线程：，因为问题的发生与我有点类似。不过，它也没有开火

我不知道该去哪里找，也不知道该贴什么错误信息：-

注意：由于SVG呈现框架拒绝设置无效属性，因此有必要使用单击而不是单击。显然，以括号开头的属性适用于HTML，但不适用于XML。然而，这不应该是问题所在，因为两个指令都是完全可交换的

附言：

名为的呈现方法使用SVG.js框架，如下所示：

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

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

以及SVG.js库生成的标记

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

---

当我将生成的SVG代码粘贴到模板中时，一切正常

我会将代码移动到组件的ngAfterViewInit钩子方法中：

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

此外，应使用ViewChild装饰器引用DOM元素：

<div #mySvgCanvas"></div>

---

我不认为这里需要显式使用区域…

我不认为Angular会解析动态添加的HTML，请参见

因此，在调用renderSVG之后，您可能需要遍历DOM并找到新添加的a元素，然后手动为每个元素添加并稍后删除事件处理程序

看

---

有关更复杂的方法，请参阅。

Mark Rajcok的链接，有关在公认答案中使用DynamicLoader组件解决方案的更复杂方法，请参阅。作为此线程的闭包，这是我的实现：

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);
 }

---

谢谢蒂埃里的快速回复。我照你说的做了，还是不工作。渲染完成后，我检查了viewchild属性，整个SVG都在那里，这很好。此外，我在画布旁边添加了另一个viewchild：一个带有点击指令的标记，就像在SVG中一样，以查看它们的ElementRef.NativeElements是否不同或如何不同。single-nativeelement附加了一个_zone_symbol__eventtasks数组，SVG中的所有标记都没有。我在ngZone中运行过SVG渲染，有一次没有。没有区别：-/你能提供一些你的renderSvg方法的摘录吗？只是想看看它是什么样子……当然。请看我添加到问题底部的PS部分。谢谢！你试过使用ChangeDetectorRef类及其detectChanges方法吗？是的，我试过使用所有ChangeDetectionStrategy组合的detectChanges和markForCheck第一个链接中提供的解决方案真的让我毛骨悚然：-我给了DynamicLoader组件一个机会，它确实有效，虽然这感觉像是中世纪的一个时期，而与盎格鲁语的一条线相比。公平地说，我们正在与RC打交道，但应该提出一个更好的解决方案。谢谢Mark！我已将实现添加到您的帖子中，并将其标记为accepted@user3802631，我完全同意。我们需要比DynamicLoader组件更简单的东西。看起来您的编辑被拒绝了。我建议你把它作为一个单独的答案。

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);
 }