Кутове прив’язка HTML

Я пишу Angular-додаток, і у мене є відповідь HTML, яку я хочу показати.

Як це зробити? Якщо я просто використовую синтаксис прив'язки, {{myVal}}він кодує всі символи HTML (звичайно).

Мені потрібно якось прив’язати innerHTMLа divдо значення змінної.

Правильний синтаксис такий:

<div [innerHTML]="theHtmlString"></div>

Довідка щодо документації

Кутовий 2.0.0 і кутовий 4.0.0 фінал

Для безпечного вмісту просто

<div [innerHTML]="myVal"></div>

DOMSanitizer

Потенційний небезпечний HTML повинен бути чітко позначений як довірений за допомогою дезінфікуючого засобу Angulars DOM, щоб не позбавити потенційно небезпечних частин вмісту

<div [innerHTML]="myVal | safeHtml"></div>

з трубою, як

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

  transform(style) {
    return this.sanitizer.bypassSecurityTrustHtml(style);
    //return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

Дивіться також У RC.1 деякі стилі не можна додати за допомогою синтаксису прив'язки

І документи: https://angular.io/api/platform-browser/DomSanitizer

Попередження про безпеку

Довіряючи HTML, який додав користувач, може становити загрозу безпеці. , Перш згадувалося документи стан:

Виклик будь-якого з bypassSecurityTrust...API вимикає вбудовану санітарію Angular щодо переданого значення. Ретельно перевіряйте та перевіряйте всі значення та шляхи коду, що надходять у цей виклик. Переконайтесь, що будь-які користувацькі дані належним чином захищені для цього контексту безпеки. Детальніше дивіться в Посібнику з безпеки .

Кутова розмітка

Щось на зразок

class FooComponent {
  bar = 'bar';
  foo = `<div>{{bar}}</div>
    <my-comp></my-comp>
    <input [(ngModel)]="bar">`;

з

<div [innerHTML]="foo"></div>

не призведе до того, що Angular обробляє щось, специфічне для кутовогоfoo . Angular замінює специфічну кутову розмітку під час збирання згенерованим кодом. Розмітка, додана під час виконання , не буде оброблятися Angular .

Щоб додати HTML, який містить специфічну для кутової розмітки (прив'язку властивості чи значення, компоненти, директиви, труби, ...), потрібно додати динамічний модуль та компілювати компоненти під час виконання. Ця відповідь надає більш детальну інформацію Як я можу використовувати / створити динамічний шаблон для компіляції динамічного компонента з Angular 2.0?

[innerHtml] є прекрасним варіантом у більшості випадків, але він не вдається з дуже великими рядками або коли вам потрібен жорсткий стиль стилізації в html.

Я хотів би поділитися іншим підходом:

Все, що вам потрібно зробити, - це створити div у своєму HTML-файлі і дати йому ідентифікатор:

<div #dataContainer></div>

Потім у своєму компоненті Angular 2 створіть посилання на цей об’єкт (TypeScript тут):

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;
    }
}

Потім просто використовуйте loadDataфункцію, щоб додати якийсь текст до html-елемента.

Це просто спосіб, який ви зробили б за допомогою власного javascript, але в Angular середовищі. Я не рекомендую його, тому що робить код більш брудним, але іноді іншого варіанту немає.

Див. Також Кутовий 2 - внутрішній стиль HTML

На angular2@2.0.0-alpha.44:

Прив'язка Html не працюватиме під час використання {{interpolation}}, замість цього використовуйте "Вираз":

недійсний

<p [innerHTML]="{{item.anleser}}"></p>

-> видає помилку (Інтерполяція замість очікуваного виразу)

правильно

<p [innerHTML]="item.anleser"></p>

-> це правильний шлях.

ви можете додати додаткові елементи до виразу, як-от:

<p [innerHTML]="'<b>'+item.anleser+'</b>'"></p>

натяк

HTML, доданий за допомогою [innerHTML](або доданий динамічно іншими способами, подібними element.appenChild()або подібними), Angular ні в якому разі не буде оброблятися, окрім санітарії для безпеки.
Такі речі діють лише тоді, коли HTML статично додається до шаблону компонентів. Якщо вам це потрібно, ви можете створити компонент під час виконання, як це пояснено у розділі Як я можу використовувати / створити динамічний шаблон для компіляції динамічного компонента з Angular 2.0?

Використання [innerHTML] безпосередньо без використання DOM-дезінфікуючого засобу Angular не є можливим, якщо він містить створений користувачем вміст. Труба safeHtml, запропонована @ GünterZöchbauer у своїй відповіді, - це один із способів санітарії вмісту. Наступна директива - ще одна:

import { Directive, ElementRef, Input, OnChanges, Sanitizer, SecurityContext,
  SimpleChanges } from '@angular/core';

// Sets the element's innerHTML to a sanitized version of [safeHtml]
@Directive({ selector: '[safeHtml]' })
export class HtmlDirective implements OnChanges {
  @Input() safeHtml: string;

  constructor(private elementRef: ElementRef, private sanitizer: Sanitizer) {}

  ngOnChanges(changes: SimpleChanges): any {
    if ('safeHtml' in changes) {
      this.elementRef.nativeElement.innerHTML =
        this.sanitizer.sanitize(SecurityContext.HTML, this.safeHtml);
    }
  }
}

Бути використаним

<div [safeHtml]="myVal"></div>

Будь ласка, зверніться до інших найновіших відповідей.

Це працює для мене: <div innerHTML = "{{ myVal }}"></div>(Angular2, Alpha 33)

Згідно з іншим SO: Вставлення HTML з сервера в DOM з angular2 (загальна маніпуляція DOM в Angular2) , " Internal -html" еквівалентний "ng-bind-html" у Angular 1.X

Просто для повного відповіді, якщо ваш вміст html знаходиться в змінній компонента, ви також можете використовувати:

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

Прошу вибачення, якщо я пропускаю суть тут, але хотів би порекомендувати інший підхід:

Я думаю, що краще повернути необроблені дані з вашого серверного додатку та прив’язати їх до шаблону на стороні клієнта. Це робить більш спритними запити, оскільки ви повертаєте json лише зі свого сервера.

Мені не здається, що має сенс використовувати Angular, якщо все, що ви робите, це отримання HTML-сервера з сервера та введення його «як є» в DOM.

Я знаю, що у Angular 1.x є HTML-прив'язка, але я ще не бачив аналога в Angular 2.0. Вони можуть додати його пізніше. У будь-якому разі я б все-таки розглядав api даних для вашого додатка Angular 2.0.

У мене є кілька зразків із простими прив'язками даних, якщо вас цікавить: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

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

Однак решта порад, згаданих тут, можуть ввести в оману. Кутовий має вбудований механізм дезінфекції, коли ви прив'язуєтесь до таких властивостей. Оскільки 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. Таким чином, ви можете запропонувати CSular для дезінфекції CSS для обробки CSS:

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

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

Це внутрішній - hense ɵпрефікс, але саме так Angular команда використовує його у своїх власних пакетах. Ця бібліотека також працює в середовищі Angular Universal і середовищі ренерінгу на стороні сервера.

Просто використовуйте [innerHTML]атрибут у своєму HTML , приблизно так:

<div [innerHTML]="myVal"></div>

У вашому компоненті колись були властивості, які містять деяку розмітку html або сутності, які потрібно відобразити у вашому шаблоні? Традиційна інтерполяція не буде працювати, але на допомогу приходить прив'язка властивості innerHTML.

Використання {{myVal}} НЕ працює, як очікувалося! Це не вибирає теги HTML, як <p>і <strong>т.д., і передаватиме їх лише як рядки ...

Уявіть, що у вашого компонента є цей код:

const myVal:string ='<strong>Stackoverflow</strong> is <em>helpful!</em>'

Якщо ви користуєтеся {{myVal}}, ви отримаєте це у вигляді:

<strong>Stackoverflow</strong> is <em>helpful!</em>

але використання [innerHTML]="myVal"робить результат таким, як очікувався таким:

Stackoverflow це корисно!

Ви можете застосувати кілька стилів для стилю, посилання та 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]="HtmlPrint"></div><br>

InnerHtml це властивість HTML-елементів, що дозволяє встановити його HTML-вміст програмно. Існує також властивість innerText, яка визначає вміст як звичайний текст.

[attributeName]="value"Коробки кронштейн, навколишній атрибут визначає кутову введення-зв'язування. Це означає, що значення властивості (у вашому випадку innerHtml) пов'язане з заданим виразом, коли вираз-результат змінюється, змінюється і значення властивості.

Таким чином, в основному, [innerHtml]ви можете прив’язувати та динамічно змінювати html-конент даного HTML-елемента.

У Angular 2 ви можете зробити 3 типи палітурки:

• [property]="expression"-> Будь-яке властивість html може посилатися на
  вираз. У цьому випадку, якщо вираз змінить властивість буде оновлено, але це не працює інакше.
• (event)="expression" -> Коли подія активує вираз Execute.
• [(ngModel)]="property"-> Пов'язує властивість з js (або ts) в html. Будь-яке оновлення цього ресурсу буде помітне скрізь.

Вираз може бути значенням, атрибутом або методом. Наприклад: '4', 'controller.var', 'getValue ()'

Приклад тут

Спосіб динамічного додавання елементів до DOM, як це пояснено в Angular 2 doc, полягає у використанні класу ViewContainerRef від @ Angular / core.

Що вам потрібно зробити, це оголосити директиву, яка буде реалізовувати ViewContainerRef і діяти як заповнювач місця у вашому домені.

Директива

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appInject]'
})
export class InjectDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

Потім у шаблоні, куди потрібно вставити компонент:

HTML

<div class="where_you_want_to_inject">    
  <ng-template appInject></ng-template>
</div>

Потім з введеного коду компонента ви введете компонент, що містить потрібний HTML:

import { Component, OnInit, ViewChild, ComponentFactoryResolver } from '@angular/core';
import { InjectDirective } from '../inject.directive';
import { InjectedComponent } from '../injected/injected.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  @ViewChild(InjectDirective) injectComp: InjectDirective;

  constructor(private _componentFactoryResolver: ComponentFactoryResolver) {
  }

  ngOnInit() {
  }

  public addComp() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const componentRef = viewContainerRef.createComponent(componentFactory);
  }

  public removeComp() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const componentRef = viewContainerRef.remove();
  }

}

Я додав повністю працюючу демо-програму на Angular 2, динамічно додаючи компонент до демонстрації DOM

Для досягнення рішення можна використовувати декілька підходів. Як уже сказано у схваленій відповіді, ви можете використовувати:

<div [innerHTML]="myVal"></div>

залежно від того, що ви намагаєтеся досягти, ви також можете спробувати інші речі, такі як JavaScript DOM (не рекомендується, операції DOM повільні):

Презентація

<div id="test"></test>

Компонент

var p = document.getElementsById("test");
p.outerHTML = myVal;

Прив’язка власності

Javascript DOM Зовнішній HTML

Ми завжди можемо передати HTML-вміст у innerHTMLвласність, щоб надати HTML-динамічний контент, але цей динамічний вміст html також може бути заражений або зловмисним. Тому перед тим, як передавати динамічний контент, innerHTMLми завжди повинні переконатися, що вміст дезінфіковано (використовується DOMSanitizer), щоб ми могли уникнути всього шкідливого вмісту.

Спробуйте нижче труби:

import { 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: string) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

Usage:
<div [innerHTML]="content | safeHtml"></div>

Якщо ви хочете, щоб це було в Angular 2 або Angular 4, а також ви хочете зберігати вбудований CSS, тоді ви можете використовувати

<div [innerHTML]="theHtmlString | keepHtml"></div>

Ви також можете зв'язати властивості класу кутових компонентів із шаблоном, використовуючи канонічну форму, як показано нижче:

<div bind-innerHTML="theHtmlString"></div>

Кутова документація: https://angular.io/guide/template-syntax#property-binding-property

Дивіться приклад робочого стекла тут

Робота в Angular v2.1.1

<div [innerHTML]="variable or htmlString">
</div>

Якщо у вашому кутовому (або будь-якому іншому рамках) шаблоні є шаблони, і ви повертаєте шаблони HTML зі свого бекенда через HTTP-запит / відповідь, ви змішуєте шаблони між інтерфейсом і заднім числом.

Чому б просто не залишити шаблонні речі або в передній частині (я б запропонував це), або в бекенді (досить непрозорий imo)?

А якщо ви зберігаєте шаблони у фронталі, то чому б просто не відповісти JSON на запити до бекенду. Вам навіть не потрібно реалізовувати структуру RESTful, але зберігання шаблонів на одній стороні робить ваш код більш прозорим.

Це окупиться, коли хтось інший повинен впоратися з вашим кодом (або навіть ви самі через деякий час повторно вводите власний код)!

Якщо ви зробите це правильно, у вас будуть невеликі компоненти з невеликими шаблонами, і найкраще, якщо ваш код imba, той, хто не знає мови кодування, зможе зрозуміти ваші шаблони та вашу логіку! Тож додатково зберігайте свої функції / методи якнайменші. Ви зрештою з’ясуєте, що підтримка, рефакторинг, перегляд та додавання функцій буде набагато простішим порівняно з великими функціями / методами / класами та змішуванням шаблонів та логіки між інтерфейсом та бекендом - і збережете стільки ж логіки в бекенді якщо ваш фронтенд повинен бути більш гнучким (наприклад, написання андроїд-фронтену або перехід на інший фронтенд).

Філософія, людина :)

ps: вам не доведеться впроваджувати 100% чистий код, тому що це дуже дорого - особливо якщо вам доведеться мотивувати членів команди;), але: ви повинні знайти хороший баланс між підходом до більш чистого коду та тим, що у вас є (можливо, це вже досить чисто)

перевірте книгу, чи можете, і дозвольте їй увійти в вашу душу: https://de.wikipedia.org/wiki/Clean_Code