Angular 2 SVG не отображается

Я создал компонент для рендеринга изображений SVG, которые находятся в моем приложении.

Они загружаются динамически, однако мое демонстрационное приложение просто показывает более простую версию.

http://plnkr.co/edit/g2tZXeUAMJ5zESx2EHT0?p=info

я пробовал <div [innerHTML]="data"></div> и <div> {{ data }} </div>

SVG не загружается, хотя вызов правильный. Я провел некоторое время в Gitter, чтобы найти решение, но самое близкое, что я получил, это то, что его дезинфицируют.

Я предполагаю, что innerHTML очищается, а интерполяция игнорируется. Он просто показывает необработанный текст SVG.

Спасибо


angular angular2-template angular2-components
person Nico    schedule 21.11.2016    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Angular очищает контент. Чтобы обойти это, явно сообщите Angular, что он может доверять вашему HTML.

импортировать { Pipe, Sanitizer } из '@angular/core';

Вы можете использовать многоразовый канал или вызвать sanitizer.bypassSecurityTrustHtml(html) напрямую.

@Pipe({name: 'safe'})
export class SafeHtml {
  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

и использовать его как

[innerHTML]="data | safe"

Пример планкера

См. также в RC.1. некоторые стили нельзя добавить с помощью синтаксиса привязки

person Günter Zöchbauer    schedule 21.11.2016
comment
Спасибо, еще кое-что, прежде чем ты уйдешь. Если бы я хотел стилизовать svg через этот компонент, как это можно было бы сделать? - person Nico; 21.11.2016
comment
Я думаю, вы имеете в виду stackoverflow.com/questions/36265026/ - person Günter Zöchbauer; 21.11.2016
comment
В более новых версиях Angular вы должны использовать DomSanitizer вместо Sanitizer, чтобы использовать это - person Szkíta; 19.11.2020

arrow_upward
0
arrow_downward

Я просто хотел бы добавить к принятому ответу Гюнтера Цохбауэра, что в более новых версиях Angular нам нужно использовать DomSanitizer вместо Sanitizer, который можно импортировать с помощью import { DomSanitizer } from '@angular/platform-browser';.

person Himanshu Patel    schedule 09.04.2021