Угловое связывание HTML

Можно использовать этот метод

<div [innerHTML]=var></div>

или связать его идентификатором

 <div #html></div>

и в компоненте

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
    templateUrl: "some html file"
})
export class MainPageComponent {

    @ViewChild('dataContainer') dataContainer: ElementRef;

    loadData(data) {
        this.dataContainer.nativeElement.innerHTML = data;
    }
}

Можно подать заявку, несколько передают по каналу для стиля, ссылки и HTML как после в .html

<div [innerHTML]="announcementContent | safeUrl| safeHtml">
                    </div>

и в канале .ts для дезинфицирующего средства 'URL'

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

@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}
    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

канал для дезинфицирующего средства 'HTML'

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

@Pipe({
    name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {}
    transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

, это будет применяться и не нарушая стиля и связывать событие

Короткий ответ уже был предоставлен здесь: используйте <div [innerHTML]="yourHtml"> привязка.

Однако остальная часть советов, упомянутых здесь, могла бы вводить в заблуждение. У Angular есть встроенный механизм очистки, когда Вы связываете со свойствами как этот. Так как Angular не является специализированной библиотекой очистки, это фанатично к подозрительному содержанию для не взятия на себя любых рисков. Например, это санирует все содержание SVG в пустую строку.

Вы могли бы услышать советы "санировать" Ваше содержание при помощи DomSanitizer для маркировки содержания как безопасное с bypassSecurityTrustXXX методы. Существуют также предложения для использования канала, чтобы сделать, это и тот канал часто называют safeHtml.

Все это вводит в заблуждение потому что это на самом деле обходы, санирующие , не санируя Ваше содержание. Это могло быть проблемой безопасности, потому что, если Вы когда-нибудь делаете это на пользователе, предоставленном содержанию или на чем-нибудь, что Вы не уверены в —, Вы открываетесь для нападений вредоносного кода.

, Если Angular удаляет что-то, что Вам нужно его встроенной санитизацией —, что можно сделать вместо того, чтобы отключить ее, делегат фактическая санитизация к специализированной библиотеке, которая способна к той задаче. Например, — DOMPurify.

я сделал библиотеку-оболочку для него так, это могло легко использоваться с Angular: https://github.com/TinkoffCreditSystems/ng-dompurify

Это также имеет канал для декларативной очистки HTML:

<div [innerHtml]="value | dompurify"></div>

различие к каналам, предложенным здесь, - то, что это на самом деле делает санитизацию через DOMPurify и поэтому работает на SVG.

Одной вещью иметь в виду является DOMPurify, является большим для очистки HTML/SVG, но не CSS. Таким образом, Вы можете дезинфицирующее средство CSS поставщика Angular для обработки CSS:

import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';

@NgModule({
    // ...
    providers: [
        {
            provide: SANITIZE_STYLE,
            useValue: ɵ_sanitizeStyle,
        },
    ],
    // ...
})
export class AppModule {}

Это - внутренний — следовательно ɵ префикс, но это - то, как команды Angular используют его через свои собственные пакеты также так или иначе. Та библиотека также работает на Angular Universal и серверную среду рендеринга.