Строка SVG не загружается angular переменных - PullRequest
0 голосов
/ 09 мая 2020

У меня следующее изображение svg в строковом формате

image = `<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
  <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
  <g>
   <title>background</title>
   <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
   <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
    <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
   </g>
  </g>
  <g>
   <title>Layer 1</title>
   <rect id="svg_5" height="82" width="169" y="60.5" x="31" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/>
   <rect stroke="#000" id="svg_6" height="83.999999" width="179" y="56.5" x="347" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#fff"/>
   <rect id="svg_7" height="84" width="171" y="251.5" x="34" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/>
   <rect stroke="#000" id="svg_8" height="83.999997" width="186" y="247.5" x="352" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#fff"/>
   <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_9" y="109.5" x="72" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">{{data['301']}}</text>
   <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_10" y="107.5" x="393" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">{{data['301']}}</text>
   <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_11" y="300.5" x="70" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">{{data['301']}}</text>
   <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_12" y="296.5" x="399" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">{{data['301']}}</text>
   <ellipse ry="45" rx="77.5" id="svg_13" cy="209.5" cx="283.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/>
   <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_14" y="212.5" x="266" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">{{data['301']}}</text>
  </g>
 </svg>`;

Я выполнил следующие шаги, чтобы загрузить это изображение в angular

В файл ts

data = {301: 0}
@ViewChild('container', { static: true, read: ElementRef }) container: ElementRef;
this.container.nativeElement.innerHTML = this.image;

В html файле

 <div #container></div>

Я хочу загрузить это изображение в свой html. Он загружается, но показывает angular переменные также в строковом формате.

enter image description here

1 Ответ

0 голосов
/ 09 мая 2020

Вы должны установить данные в компоненте:

@Component({
  selector: 'my-app',
  template: '<div [innerHTML]="innerHTML"></div>',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
  innerHTML: SafeHtml;

  constructor(
    private _cdr: ChangeDetectorRef,
    private _sanitizer: DomSanitizer,
  ) {
    // data from server
    const { data, svg } = {
      data: {
        '301': 'some text',
      },
      svg: '<svg viewBox="0 0 500 80" xmlns="http://www.w3.org/2000/svg">\
        <text x="10" y="20" >example: ${ data["301"] } count: ${ count }</text>\
      </svg>',
    };

    let count = 0;
    this._addSvg(data, svg, count);

    setInterval(
      () => {
        count += 1;
        this._addSvg(data, svg, count);
        this._cdr.detectChanges();
      },
      3000,
    )
  }

  private _addSvg(data: any, svg: string, count: number): void {
    const evalSvg = eval('`' + svg + '`');
    this.innerHTML = this._sanitizer.bypassSecurityTrustHtml(evalSvg);
  }
}

Документация: Шаблонные литералы (Шаблонные строки)

из angular 8+ вы можете использовать svg в качестве шаблона:

svg.component.ts:

@Component({
  selector: 'app-svg',
  templateUrl: './svg.component.svg',
  styleUrls: ['./svg.component.scss'],
})
export class SvgComponent {
  @Input() textLine1: string;
  @Input() textLine2: string;
}

svg.component.svg:

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
  ...
  <g>
    <text ...>{{ textLine1 }}</text>
    <text ...>{{ textLine2 }}</text>
  </g>
</svg>

и реализация:

<app-svg
  [testLine1]="data[301]"
  [textLine2]="data['otherInput']"
></app-svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...