获取包含数据绑定的 svg 的 html 内容答案

【问题标题】：Get the html content of a svg containing data binding获取包含数据绑定的 svg 的 html 内容
【发布时间】：2017-09-07 20:02:56
【问题描述】：

我能够在我的角度组件中成功创建一个 svg。但是当尝试提取 svg html 以将其保存为 img 时，模板绑定值不会出现。

我创建了以下plunker 来证明这个问题。尝试获取ViewChild outerHtml 时，输出不包含内部文本，也不包含使用attr.x 设置的x 值

【问题讨论】：

标签： angular svg binding

【解决方案1】：

我认为你应该使用ngAfterViewInit 而不是ngOnInit

export class App implements OnInit {
  name:string;
  boxTextX:string;
  boxX: string;
  num:string;
  svgContent:string;
  @ViewChild('graph') svg;

  constructor() {
    this.boxX = '45%';
    this.boxTextX = '46%';
    this.num = '46';
  }
  ngAfterViewInit() {
    var svgDoc = this.svg.nativeElement;
    this.svgContent = svgDoc.outerHTML;
  }
}

Plunker example

【讨论】：

如果我有一个对我的组件的输入并且在更改时我想获得新的 svgContent。如果我尝试在 ngOnChange 中获取内容，它不起作用。
您能否更新您的 Plunker 以展示您尝试完成的工作？我不太明白你的问题。
我更新了插件。问题是它总是落后于更新。尝试在输入字段中输入 2+ 个数字，您就会明白我的意思。 plnkr.co/edit/liRo6UWJjGR3PdUmJsMA?p=preview
你的意思是this.boxX = this.num + "%"; 是在this.svg.nativeElement.outerHTML 读取DOM 之后设置的吗？那不应该工作。 plnkr.co/edit/W8WlWOSc306vK5Nz2sg9?p=preview
哦，抱歉，订单问题是 plunker 中的一个错误。但似乎this.cdRef.detectChanges(); 解决了这个问题。谢谢:)