Использование Angular 2+ [innerHTML] для добавления html, включая атрибуты стиля

Question

Использование Angular 2+ [innerHTML] для добавления html, включая атрибуты стиля

1

Я использую вход Angular 2+ [innerHTML] для вставки форматирования HTML, включая метки стиля.

В моем шаблоне у меня есть что-то вроде:

<span [innerHTML]="someVar"></span>

В моем компоненте у меня есть:

someVar = '<span style="background-color:#990000">test</span>';

Я получаю предупреждение:

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

В выводе, вставленный пролет в неповрежденном, минус атрибут стиля.

Поэтому я использовал трубку из этого сообщения:

qaru.site/questions/12313/...

Это выглядит как:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({name: 'safeHtml'})
export class SanitizeHtml implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(html): SafeHtml {
    // return this.sanitizer.bypassSecurityTrustStyle(style);
    return this.sanitizer.bypassSecurityTrustHtml(html);
    // return this.sanitizer.bypassSecurityTrustScript(value);
    // return this.sanitizer.bypassSecurityTrustUrl(value);
    // return this.sanitizer.bypassSecurityTrustResourceUrl(value);
  }
}

Это не дает никакой разницы, чем раньше, хотя я не уверен, что использую это правильно...

Как я могу заставить Angular сохранить атрибут стиля с помощью innerHTML?

BBaysinger 11 сен. 2017, в 09:23

Источник

1

Посмотрите на этот пост: stackoverflow.com/a/34467699/5468463
Vega 11 сен. 2017, в 06:35
1

Благодарю. То, что у меня было, должно было сработать. Я не знаю, почему это не с первого раза ... Во всяком случае, обновил трубу в моем посте.
BBaysinger 11 сен. 2017, в 06:44

Теги:

angular

javascript

css

2 ответа

1

Либо вы используете этот фильтр, либо используете его в своем коде.

Чтобы применить фильтр, вам необходимо использовать его в своем HTML, например:

<span [innerHTML]="someVar | safeStyle"></span>

trichetriche 11 сен. 2017, в 04:50

1

Ага. Вот что у меня есть. Оно работает!
BBaysinger 11 сен. 2017, в 06:46

Ещё вопросы

Посмотрите на этот пост: stackoverflow.com/a/34467699/5468463
Благодарю. То, что у меня было, должно было сработать. Я не знаю, почему это не с первого раза ... Во всяком случае, обновил трубу в моем посте.
Ага. Вот что у меня есть. Оно работает!

Rob Bailey · Accepted Answer · 2017-09-11T04-02-00.000Z

Ты почти там. Вам просто нужно убедиться, что вы используете свой канал для своей строки HTML.

Пример трубы:

import {Pipe} from '@angular/core'; 
import {DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl} from '@angular/platform-browser';
@Pipe({
name: 'safe'
})
export class SafePipe {

constructor(protected sanitizer: DomSanitizer) {}

  transform(htmlString: string): any {
    return this.sanitizer.bypassSecurityTrustHtml(htmlString);
  }
}

Пример использования:

<span [innerHTML]="someVar | safe"></span>

Надеюсь это поможет!