在(使用innerHtml)角4+中动态地将它们添加到模板时启用双向数据绑定

Question

我试图使用角的双向数据绑定语法，通过输入从svg文本区域中编辑文本

我从服务器获得svg内容，所以我必须通过innerHtml将它添加到html中，如果从外部添加html，则角内插({{.}})已经在svg角中，需要添加sanitizer.bypassSecurityTrustHtml(htmlValue)。

当我运行应用程序时，它打开我的svg，但将双向数据绑定语法显示为字符串{Name}，并且当im在输入(see image link below how its looks in the browser)中输入时无法更改值。

有什么帮助吗？

​

import { Component, OnInit} from '@angular/core';
import { LatterDetails } from 'src/Module/LatterDetailsModule';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css'],
})

export class EditComponent implements OnInit {
public Name = "abc";

  	public svgFile;
  	constructor() {} 
  

  ngOnInit() {
  this.svgFile =`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"     viewBox="0 0 2400 3300">
    <defs>
      <style>
        .cls-1,
        .cls-2 {
          font-size: 125px;
          text-anchor: middle;
        }
    
        .cls-1 {
          font-family: "AR CARTER";
        }
    
        .cls-2 {
          font-family: "AR JULIAN";
        }
    
        .cls-3 {
          font-size: 200px;
        }
      </style>
    </defs>
    <image id="images" y="27" width="2424" height="3281" xlink:href='https://openclipart.org/download/282853/Border-68-US--Arvin61r58.svg' />
    <text id="_details.Name_" class="cls-1" x="1200" y="2526.002">
      **<tspan x="1200">Name: {{Name}}</tspan>**
    </text>
    <text id="abc_123" data-name="abc 123" class="cls-2" x="1203" y="665.999">
      <tspan x="1203">abc 123</tspan>
    </text> 
    </svg>`;
  }
}

<div class="container">
  <div class="row">
    <div class="col-sm" [innerHtml]="svgFile | safe: 'html'">
    </div>
        <input [(ngModel)]="Name">
  </div>
</div>

​

查看其在浏览器中的显示方式。

Answer 1

你能试试：

Name: ${Name}</tspan>**