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

Question

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

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

设置的x值

Answer 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