Binding HTML angolare

Sto scrivendo un'applicazione angolare e ho una risposta HTML che voglio visualizzare.

Come lo faccio? Se uso semplicemente la sintassi di associazione {{myVal}}, codifica tutti i caratteri HTML (ovviamente).

Ho bisogno in qualche modo di associare il valore innerHTMLdi diva al valore variabile.

La sintassi corretta è la seguente:

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

Riferimenti alla documentazione

Angular 2.0.0 e Angular 4.0.0 final

Solo per contenuti sicuri

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

DOMSanitizer

Il potenziale HTML non sicuro deve essere esplicitamente contrassegnato come attendibile utilizzando il disinfettante DOM Angulars in modo da non rimuovere parti potenzialmente pericolose del contenuto

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

con una pipa come

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

Vedi anche In RC.1 alcuni stili non possono essere aggiunti usando la sintassi di associazione

E documenti: https://angular.io/api/platform-browser/DomSanitizer

Avviso di sicurezza

La fiducia nell'HTML aggiunto dall'utente può comportare un rischio per la sicurezza. I documenti precedentemente menzionati dichiarano:

La chiamata a una qualsiasi delle bypassSecurityTrust...API disabilita la sanificazione integrata di Angular per il valore trasmesso. Controllare e controllare attentamente tutti i valori e i percorsi di codice che entrano in questa chiamata. Assicurarsi che tutti i dati utente siano salvati in modo appropriato per questo contesto di sicurezza. Per maggiori dettagli, consultare la Guida alla sicurezza .

Markup angolare

Qualcosa di simile a

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

con

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

non farà in modo che Angular elabori qualcosa di specifico in Angularfoo . Angular sostituisce il markup specifico Angular al momento della creazione con il codice generato. Il markup aggiunto in fase di runtime non verrà elaborato da Angular .

Per aggiungere HTML che contiene markup specifici angolari (proprietà o associazione di valori, componenti, direttive, pipe, ...) è necessario aggiungere il modulo dinamico e compilare i componenti in fase di esecuzione. Questa risposta fornisce ulteriori dettagli Come posso utilizzare / creare un modello dinamico per compilare Componente dinamico con Angular 2.0?

[innerHtml] è un'ottima opzione nella maggior parte dei casi, ma fallisce con stringhe molto grandi o quando hai bisogno di uno stile hard-coded in HTML.

Vorrei condividere un altro approccio:

Tutto quello che devi fare è creare un div nel tuo file html e dargli un id:

<div #dataContainer></div>

Quindi, nel componente Angular 2, creare un riferimento a questo oggetto (digitare quiScript):

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

Quindi usa semplicemente la loadDatafunzione per aggiungere del testo all'elemento html.

È solo un modo per farlo usando javascript nativo, ma in ambiente angolare. Non lo consiglio, perché rende il codice più disordinato, ma a volte non c'è altra opzione.

Vedi anche Angular 2 - styling innerHTML

Su angular2@2.0.0-alpha.44:

Html-Binding non funzionerà quando si usa un {{interpolation}} , usare invece "Expression":

non valido

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

-> genera un errore (interpolazione anziché espressione prevista)

corretta

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

-> questo è il modo corretto.

puoi aggiungere ulteriori elementi all'espressione, come:

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

suggerimento

L'HTML aggiunto utilizzando [innerHTML](o aggiunto in modo dinamico con altri mezzi simili element.appenChild()o simili) non verrà elaborato da Angular in alcun modo tranne che per la sanificazione a fini di sicurezza.
Queste cose funzionano solo quando l'HTML viene aggiunto staticamente a un modello di componenti. Se necessario, è possibile creare un componente in fase di esecuzione come spiegato in Come posso utilizzare / creare un modello dinamico per compilare un componente dinamico con Angular 2.0?

L'uso di [innerHTML] direttamente senza l'utilizzo del disinfettante DOM di Angular non è un'opzione se contiene contenuti creati dall'utente. La pipe safeHtml suggerita da @ GünterZöchbauer nella sua risposta è un modo per disinfettare il contenuto. La seguente direttiva è un'altra:

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

Da essere usato

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

Si prega di fare riferimento ad altre risposte più aggiornate.

Questo funziona per me: <div innerHTML = "{{ myVal }}"></div>(Angular2, Alpha 33)

Secondo un altro SO: Inserimento di HTML dal server in DOM con angular2 (manipolazione DOM generale in Angular2) , "inner-html" equivale a "ng-bind-html" in Angular 1.X

Giusto per dare una risposta completa, se il tuo contenuto html è in una variabile componente, puoi anche usare:

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

Mi scuso se mi manca il punto qui, ma vorrei raccomandare un approccio diverso:

Penso che sia meglio restituire i dati grezzi dall'applicazione lato server e associarli a un modello sul lato client. Questo rende le richieste più agili poiché stai solo restituendo json dal tuo server.

Per me non ha senso usare Angular se tutto ciò che stai facendo è recuperare html dal server e iniettarlo "così com'è" nel DOM.

So che Angular 1.x ha un'associazione html, ma non ho ancora visto una controparte in Angular 2.0. Potrebbero aggiungerlo in seguito però. Comunque, prenderei comunque in considerazione un'API di dati per la tua app Angular 2.0.

Ho alcuni esempi qui con alcuni semplici collegamenti dati se siete interessati: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

La risposta breve è stata fornita qui già: utilizzare <div [innerHTML]="yourHtml"> associazione.

Tuttavia, il resto dei consigli menzionati qui potrebbe essere fuorviante. Angular ha un meccanismo di sanificazione integrato quando ti colleghi a proprietà del genere. Poiché Angular non è una libreria dedicata alla sanificazione, è troppo zelante verso contenuti sospetti non correre alcun rischio. Ad esempio, disinfetta tutto il contenuto SVG in una stringa vuota.

Potresti ricevere consigli per "disinfettare" i tuoi contenuti usando DomSanitizerper contrassegnare i contenuti come sicuri con i bypassSecurityTrustXXXmetodi. Ci sono anche suggerimenti per usare pipe per farlo e quel pipe viene spesso chiamatosafeHtml .

Tutto ciò è fuorviante perché aggira effettivamente la sanificazione , non la sanificazione dei tuoi contenuti. Questo potrebbe essere un problema di sicurezza perché se lo fai mai sul contenuto fornito dall'utente o su qualcosa di cui non sei sicuro, ti apri per attacchi di codice dannoso.

Se Angular rimuove qualcosa di cui hai bisogno dalla sua sanificazione integrata, quello che puoi fare invece di disabilitarlo è delegare la sanificazione effettiva a una libreria dedicata che è brava in tale compito. Ad esempio - DOMPurify.

Ho creato una libreria wrapper per poterlo facilmente usare con Angular: https://github.com/TinkoffCreditSystems/ng-dompurify

Ha anche una pipe per disinfettare in modo dichiarativo HTML:

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

La differenza rispetto alle tubazioni suggerite qui è che effettivamente esegue la sanificazione tramite DOMPurify e quindi funziona per SVG.

Una cosa da tenere a mente è che DOMPurify è ottimo per disinfettare HTML / SVG, ma non CSS. Quindi puoi fornire il disinfettante CSS di Angular per gestire i CSS:

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

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

È un ɵprefisso interno, ma questo è il modo in cui il team Angular lo usa anche nei propri pacchetti. Tale libreria funziona anche per l'ambiente angolare universale e l'ambiente lato server.

Usa semplicemente l' [innerHTML]attributo nel tuo HTML , qualcosa di simile qui sotto:

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

Hai mai avuto proprietà nel tuo componente che contengono alcuni markup html o entità che devi visualizzare nel tuo modello? L'interpolazione tradizionale non funzionerà, ma il binding della proprietà innerHTML viene in soccorso.

L'uso {{myVal}} NON funziona come previsto! Questo non raccoglierà i tag HTML come <p>, <strong>ecc. E non li passerà solo come stringhe ...

Immagina di avere questo codice nel tuo componente:

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

Se lo usi {{myVal}}, otterrai questo nella vista:

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

ma l'utilizzo [innerHTML]="myVal"rende il risultato come previsto in questo modo:

Stackoverflow è utile!

Puoi applicare più pipe per stile, link e HTML come segue in .html

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

e nella pipa .ts per il disinfettante '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);
    }
}

pipe per disinfettante '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);
    }
}

questo si applicherà sia senza disturbare alcuno stile che per l'evento click link

 <div [innerHTML]="HtmlPrint"></div><br>

L'innerHtml è una proprietà di elementi HTML, che permette di impostare è l'HTML contenuto programmaticamente. C'è anche una proprietà innerText che definisce il contenuto come testo semplice.

Il [attributeName]="value" parentesi quadra, che circonda l'attributo, definisce un'associazione di input angolare. Ciò significa che il valore della proprietà (nel tuo caso innerHtml) è associato all'espressione data, quando cambia il risultato dell'espressione, cambia anche il valore della proprietà.

Quindi, fondamentalmente, [innerHtml]ti consente di associare e modificare dinamicamente il conteggio HTML dell'elemento HTML specificato.

In Angular 2 puoi eseguire 3 tipi di attacchi:

• [property]="expression"-> Qualsiasi proprietà HTML può essere collegata a
  un'espressione. In questo caso, se la proprietà cambia espressione si aggiornerà, ma ciò non funziona nell'altro modo.
• (event)="expression" -> Quando l'evento si attiva, esegui espressione.
• [(ngModel)]="property"-> Associa la proprietà da js (o ts) a html. Qualsiasi aggiornamento su questa proprietà sarà evidente ovunque.

Un'espressione può essere un valore, un attributo o un metodo. Ad esempio: '4', 'controller.var', 'getValue ()'

Esempio qui

Il modo per aggiungere dinamicamente elementi al DOM, come spiegato nel documento Angular 2, è usare la classe ViewContainerRef da @ Angular / core.

Quello che devi fare è dichiarare una direttiva che implementerà ViewContainerRef e fungerà da segnaposto sul tuo DOM.

Direttiva

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

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

  constructor(public viewContainerRef: ViewContainerRef) { }

}

Quindi, nel modello in cui si desidera iniettare il componente:

HTML

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

Quindi, dal codice componente iniettato, verrà iniettato il componente contenente l'HTML desiderato:

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

}

Ho aggiunto un'app demo completamente funzionante su Angular 2 per aggiungere dinamicamente un componente alla demo DOM

È possibile utilizzare diversi approcci per ottenere la soluzione. Come già detto nella risposta approvata, è possibile utilizzare:

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

a seconda di ciò che stai cercando di ottenere, puoi anche provare altre cose come javascript DOM (non raccomandato, le operazioni DOM sono lente):

Presentazione

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

Componente

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

Proprietà vincolante

Javascript esterno HTML DOM

Possiamo sempre passare il contenuto html alla innerHTMLproprietà per renderizzare il contenuto dinamico html ma anche quel contenuto dinamico html può essere infetto o malevolo. Quindi, prima di passare il contenuto dinamico a innerHTML, dovremmo sempre assicurarci che il contenuto sia disinfettato (usandoDOMSanitizer ) in modo da poter sfuggire a tutti i contenuti dannosi.

Prova sotto il tubo:

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>

Se lo desideri in Angular 2 o Angular 4 e vuoi anche mantenere i CSS in linea, puoi usarli

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

Puoi anche associare le proprietà della classe del componente angolare al modello usando la forma canonica come di seguito:

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

Documentazione angolare: https://angular.io/guide/template-syntax#property-binding-property

Vedi l' esempio di stackblitz funzionante qui

Lavorare in Angular v2.1.1

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

Se hai modelli nella tua applicazione angolare (o qualunque framework) e restituisci modelli HTML dal tuo backend attraverso una richiesta / risposta HTTP, stai mescolando i template tra frontend e backend.

Perché non lasciare semplicemente le cose dei modelli nel frontend (lo suggerirei) o nel backend (imo piuttosto intransparente)?

E se mantieni i template nel frontend, perché non rispondere semplicemente con JSON per richieste al backend. Non è nemmeno necessario implementare una struttura RESTful, ma mantenere i modelli su un lato rende il codice più trasparente.

Questo ripagherà quando qualcun altro dovrà far fronte al tuo codice (o anche tu stesso inserirai nuovamente il tuo codice dopo un po ')!

Se lo fai nel modo giusto, avrai piccoli componenti con piccoli modelli e, soprattutto, se il tuo codice è imba, qualcuno che non conosce i linguaggi di programmazione sarà in grado di comprendere i tuoi modelli e la tua logica! Inoltre, mantieni le tue funzioni / metodi il più piccolo possibile. Alla fine scoprirai che il mantenimento, il refactoring, la revisione e l'aggiunta di funzionalità saranno molto più facili rispetto alle grandi funzioni / metodi / classi e mescolando il modello e la logica tra il frontend e il backend - e manterrai la maggior parte della logica nel backend se il tuo frontend deve essere più flessibile (ad es. scrivere un frontend Android o passare a un framework di frontend diverso).

Filosofia, amico :)

ps: non devi implementare un codice pulito al 100%, perché è molto costoso - specialmente se devi motivare i membri del team;) ma: dovresti trovare un buon equilibrio tra un approccio al codice più pulito e quello che hai (forse è già abbastanza pulito)

controlla il libro se puoi e lascia che entri nella tua anima: https://de.wikipedia.org/wiki/Clean_Code