Winkel-HTML-Bindung

Ich schreibe eine Angular-Anwendung und habe eine HTML-Antwort, die ich anzeigen möchte.

Wie mache ich das? Wenn ich einfach die Bindungssyntax verwende, werden {{myVal}}(natürlich) alle HTML-Zeichen codiert.

Ich muss irgendwie das innerHTMLvon a divan den variablen Wert binden .

Die richtige Syntax lautet wie folgt:

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

Dokumentationsreferenz

Angular 2.0.0 und Angular 4.0.0 final

Nur für sichere Inhalte

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

DOMSanitizer

Potenziell unsicheres HTML muss mit Angulars DOM Sanitizer explizit als vertrauenswürdig markiert werden, damit potenziell unsichere Teile des Inhalts nicht entfernt werden

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

mit einer Pfeife wie

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

Siehe auch In RC.1 können einige Stile nicht mithilfe der Bindungssyntax hinzugefügt werden

Und Dokumente: https://angular.io/api/platform-browser/DomSanitizer

Sicherheitswarnung

Das Vertrauen in vom Benutzer hinzugefügtes HTML kann ein Sicherheitsrisiko darstellen. In den oben genannten Dokumenten heißt es :

Durch Aufrufen einer der bypassSecurityTrust...APIs wird die integrierte Bereinigung von Angular für den übergebenen Wert deaktiviert. Überprüfen und prüfen Sie sorgfältig alle Werte und Codepfade, die in diesen Aufruf eingehen. Stellen Sie sicher, dass alle Benutzerdaten für diesen Sicherheitskontext entsprechend maskiert sind. Weitere Informationen finden Sie im Sicherheitshandbuch .

Winkelmarkierung

Etwas wie

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

mit

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

veranlasst Angular nicht, irgendetwas Angular-spezifisches in zu verarbeitenfoo . Angular ersetzt Angular-spezifisches Markup zur Erstellungszeit durch generierten Code. Zur Laufzeit hinzugefügtes Markup wird von Angular nicht verarbeitet .

Um HTML hinzuzufügen, das Angular-spezifisches Markup enthält (Eigenschafts- oder Wertebindung, Komponenten, Direktiven, Pipes, ...), müssen Sie das dynamische Modul hinzufügen und Komponenten zur Laufzeit kompilieren. Diese Antwort enthält weitere Details. Wie kann ich eine dynamische Vorlage verwenden / erstellen, um eine dynamische Komponente mit Angular 2.0 zu kompilieren?

[innerHtml] ist in den meisten Fällen eine großartige Option, schlägt jedoch bei sehr großen Zeichenfolgen fehl oder wenn Sie ein hartcodiertes Styling in HTML benötigen.

Ich möchte einen anderen Ansatz teilen:

Alles, was Sie tun müssen, ist, ein Div in Ihrer HTML-Datei zu erstellen und ihr eine ID zu geben:

<div #dataContainer></div>

Erstellen Sie dann in Ihrer Angular 2-Komponente einen Verweis auf dieses Objekt (TypeScript hier):

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

Verwenden Sie dann einfach die loadDataFunktion, um Text an das HTML-Element anzuhängen.

Es ist nur eine Möglichkeit, dies mit nativem Javascript zu tun, jedoch in einer Angular-Umgebung. Ich empfehle es nicht, weil es den Code unordentlicher macht, aber manchmal gibt es keine andere Option.

Siehe auch Angular 2 - innerHTML-Styling

Auf [email protected]:

Die HTML-Bindung funktioniert nicht, wenn Sie einen verwenden {{interpolation}}. Verwenden Sie stattdessen einen "Ausdruck":

ungültig

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

-> löst einen Fehler aus (Interpolation statt erwarteter Ausdruck)

richtig

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

-> das ist der richtige Weg.

Sie können dem Ausdruck zusätzliche Elemente hinzufügen, z.

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

Hinweis

HTML-Code, der mit [innerHTML](oder dynamisch auf andere Weise wie element.appenChild()oder ähnlich) dynamisch hinzugefügt wurde , wird von Angular in keiner Weise verarbeitet, außer aus Sicherheitsgründen.
Solche Dinge funktionieren nur, wenn der HTML-Code statisch zu einer Komponentenvorlage hinzugefügt wird. Wenn Sie dies benötigen, können Sie zur Laufzeit eine Komponente erstellen, wie unter Wie kann ich eine dynamische Vorlage zum Kompilieren einer dynamischen Komponente mit Angular 2.0 verwenden / erstellen?

Die direkte Verwendung von [innerHTML] ohne Verwendung von Angulars DOM-Desinfektionsprogramm ist keine Option, wenn es vom Benutzer erstellte Inhalte enthält. Die von @ GünterZöchbauer in seiner Antwort vorgeschlagene safeHtml-Pipe ist eine Möglichkeit, den Inhalt zu bereinigen . Die folgende Richtlinie ist eine andere:

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

Verwendet werden

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

Bitte beziehen Sie sich auf andere Antworten, die aktueller sind.

Das funktioniert bei mir: <div innerHTML = "{{ myVal }}"></div>(Angular2, Alpha 33)

Gemäß einem anderen SO: Einfügen von HTML vom Server in das DOM mit angle2 (allgemeine DOM-Manipulation in Angular2) entspricht "inner-html" "ng-bind-html" in Angular 1.X.

Um eine vollständige Antwort zu erhalten, können Sie, wenn sich Ihr HTML-Inhalt in einer Komponentenvariablen befindet, auch Folgendes verwenden:

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

Ich entschuldige mich, wenn ich den Punkt hier verpasse, aber ich möchte einen anderen Ansatz empfehlen:

Ich denke, es ist besser, Rohdaten von Ihrer serverseitigen Anwendung zurückzugeben und sie an eine Vorlage auf der Clientseite zu binden. Dies sorgt für schnellere Anfragen, da Sie nur json von Ihrem Server zurückgeben.

Für mich scheint es nicht sinnvoll zu sein, Angular zu verwenden, wenn Sie nur HTML vom Server abrufen und es "wie es ist" in das DOM einfügen.

Ich weiß, dass Angular 1.x eine HTML-Bindung hat, aber ich habe noch kein Gegenstück in Angular 2.0 gesehen. Sie könnten es aber später hinzufügen. Auf jeden Fall würde ich immer noch eine Daten-API für Ihre Angular 2.0-App in Betracht ziehen.

Ich habe hier einige Beispiele mit einer einfachen Datenbindung, wenn Sie interessiert sind: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

Hier wurde bereits eine kurze Antwort gegeben: <div [innerHTML]="yourHtml">Bindung verwenden.

Der Rest der hier genannten Ratschläge kann jedoch irreführend sein. Angular verfügt über einen integrierten Desinfektionsmechanismus, wenn Sie an solche Eigenschaften binden. Da Angular keine dedizierte Desinfektionsbibliothek ist, ist es gegenüber verdächtigen Inhalten übereifrig, kein Risiko einzugehen. Beispielsweise werden alle SVG-Inhalte in leere Zeichenfolgen bereinigt.

Möglicherweise hören Sie Ratschläge, Ihren Inhalt zu "bereinigen", indem Sie ihn DomSanitizermit bypassSecurityTrustXXXMethoden als sicher markieren . Es gibt auch Vorschläge, Pipe zu verwenden, und diese Pipe wird oft genannt safeHtml.

All dies ist irreführend, weil es tatsächlich die Desinfektion umgeht und nicht die Bereinigung Ihrer Inhalte. Dies kann ein Sicherheitsrisiko sein, denn wenn Sie dies jemals für vom Benutzer bereitgestellte Inhalte oder für etwas tun, bei dem Sie sich nicht sicher sind, öffnen Sie sich für Angriffe mit bösartigem Code.

Wenn Angular durch die integrierte Bereinigung etwas entfernt, das Sie benötigen, können Sie die eigentliche Bereinigung an eine dedizierte Bibliothek delegieren, die für diese Aufgabe geeignet ist, anstatt sie zu deaktivieren. Zum Beispiel - DOMPurify.

Ich habe eine Wrapper-Bibliothek dafür erstellt, damit sie problemlos mit Angular verwendet werden kann: https://github.com/TinkoffCreditSystems/ng-dompurify

Es hat auch eine Pipe, um HTML deklarativ zu bereinigen:

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

Der Unterschied zu den hier vorgeschlagenen Rohren besteht darin, dass sie tatsächlich die Desinfektion über DOMPurify durchführen und daher für SVG funktionieren.

Eine Sache, die Sie beachten sollten, ist, dass DOMPurify sich hervorragend zum Bereinigen von HTML / SVG eignet, nicht jedoch von CSS. So können Sie Angulars CSS-Desinfektionsmittel für CSS bereitstellen:

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

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

Es ist ein internes ɵPräfix - hense , aber so verwendet es das Angular-Team sowieso auch für seine eigenen Pakete. Diese Bibliothek funktioniert auch für Angular Universal- und serverseitige Renedring-Umgebungen.

Verwenden [innerHTML]Sie einfach ein Attribut in Ihrem HTML- Code.

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

Hatten Sie jemals Eigenschaften in Ihrer Komponente, die einige HTML-Markups oder Entitäten enthalten, die Sie in Ihrer Vorlage anzeigen müssen? Die herkömmliche Interpolation funktioniert nicht, aber die innerHTML-Eigenschaftsbindung hilft.

Verwendung {{myVal}} funktioniert NICHT wie erwartet! Dies wird nicht abholen die HTML - Tags wie <p>, <strong>etc und geben es nur als Strings ...

Stellen Sie sich vor, Sie haben diesen Code in Ihrer Komponente:

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

Wenn Sie verwenden {{myVal}}, erhalten Sie dies in der Ansicht:

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

Mit using [innerHTML]="myVal"wird das Ergebnis jedoch wie erwartet ausgeführt:

Stackoverflow ist hilfreich!

Sie können mehrere Pipe für Stil, Link und HTML wie folgt in .html anwenden

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

und in .ts-Pipe für 'URL'-Desinfektionsmittel

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 für 'HTML'-Desinfektionsmittel

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

Dies gilt sowohl ohne Störung des Stils als auch des Link-Klick-Ereignisses

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

Das innerHtml ist eine Eigenschaft von HTML-Elemente, die Sie es HTML-Inhalt programmatisch festlegen können. Es gibt auch eine innerText-Eigenschaft, die den Inhalt als einfachen Text definiert.

Das [attributeName]="value" das Attribut umgebende Box-Klammer definiert eine Winkeleingabebindung. Das bedeutet, dass der Wert der Eigenschaft (in Ihrem Fall innerHtml) an den angegebenen Ausdruck gebunden ist. Wenn sich das Ausdrucksergebnis ändert, ändert sich auch der Eigenschaftswert.

Grundsätzlich [innerHtml]können Sie also den HTML-Inhalt des angegebenen HTML-Elements binden und dynamisch ändern.

In Angular 2 können Sie drei Arten von Bindungen ausführen:

• [property]="expression"-> Jede HTML-Eigenschaft kann mit einem
  Ausdruck verknüpft werden . In diesem Fall wird die Eigenschaft "Ausdrucksänderungen" aktualisiert, dies funktioniert jedoch nicht andersherum.
• (event)="expression" -> Wenn das Ereignis aktiviert ist, führen Sie den Ausdruck aus.
• [(ngModel)]="property"-> Bindet die Eigenschaft von js (oder ts) an HTML. Jedes Update dieser Eigenschaft ist überall spürbar.

Ein Ausdruck kann ein Wert, ein Attribut oder eine Methode sein. Zum Beispiel: '4', 'controller.var', 'getValue ()'

Beispiel hier

Die Möglichkeit, Elemente dynamisch zu DOM hinzuzufügen, wie in Angular 2-Dokument erläutert, besteht in der Verwendung der ViewContainerRef-Klasse von @ Angular / core.

Sie müssen lediglich eine Direktive deklarieren, die ViewContainerRef implementiert und sich wie ein Platzhalter in Ihrem DOM verhält.

Richtlinie

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

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

  constructor(public viewContainerRef: ViewContainerRef) { }

}

Dann in der Vorlage, in die Sie die Komponente einfügen möchten:

HTML

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

Anschließend fügen Sie aus dem Code der injizierten Komponente die Komponente ein, die den gewünschten HTML-Code enthält:

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

}

Ich habe eine voll funktionsfähige Demo-App für Angular 2 hinzugefügt, die der DOM-Demo dynamisch Komponenten hinzufügt

Sie können verschiedene Ansätze verwenden, um die Lösung zu erreichen. Wie bereits in der genehmigten Antwort erwähnt, können Sie Folgendes verwenden:

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

Abhängig davon, was Sie erreichen möchten, können Sie auch andere Dinge wie Javascript-DOM ausprobieren (nicht empfohlen, DOM-Vorgänge sind langsam):

Präsentation

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

Komponente

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

Eigenschaftsbindung

Javascript DOM Äußeres HTML

Wir können jederzeit HTML-Inhalte an innerHTMLEigenschaften übergeben, um dynamische HTML-Inhalte zu rendern, aber diese dynamischen HTML-Inhalte können auch infiziert oder bösartig sein. Bevor innerHTMLwir also dynamischen Inhalt an übergeben , sollten wir immer sicherstellen, dass der Inhalt bereinigt ist (mitDOMSanitizer ), damit wir allen schädlichen Inhalten entkommen können.

Versuchen Sie es unter dem Rohr:

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>

Wenn Sie dies in Angular 2 oder Angular 4 möchten und auch Inline-CSS beibehalten möchten, können Sie es verwenden

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

Sie können die Eigenschaften der Winkelkomponentenklasse auch mit einer Vorlage in kanonischer Form wie folgt verknüpfen:

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

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

Siehe Arbeitsstapelblitz- Beispiel hier

Arbeiten in Angular v2.1.1

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

Wenn Ihre eckige Anwendung (oder ein beliebiges Framework) Vorlagen enthält und Sie HTML-Vorlagen von Ihrem Backend über eine HTTP-Anforderung / Antwort zurückgeben, verwechseln Sie Vorlagen zwischen dem Frontend und dem Backend.

Warum lassen Sie die Vorlagen nicht einfach entweder im Frontend (das würde ich vorschlagen) oder im Backend (ziemlich intransparent imo)?

Wenn Sie Vorlagen im Frontend behalten, antworten Sie einfach mit JSON auf Anfragen an das Backend. Sie müssen nicht einmal eine RESTful-Struktur implementieren, aber wenn Sie Vorlagen auf einer Seite halten, wird Ihr Code transparenter.

Dies zahlt sich aus, wenn jemand anderes mit Ihrem Code fertig werden muss (oder sogar Sie selbst nach einer Weile Ihren eigenen Code erneut eingeben)!

Wenn Sie es richtig machen, haben Sie kleine Komponenten mit kleinen Vorlagen, und das Beste ist, wenn Ihr Code imba ist, kann jemand, der keine Programmiersprachen kennt, Ihre Vorlagen und Ihre Logik verstehen! Halten Sie Ihre Funktionen / Methoden außerdem so klein wie möglich. Sie werden schließlich feststellen, dass das Verwalten, Umgestalten, Überprüfen und Hinzufügen von Funktionen im Vergleich zu großen Funktionen / Methoden / Klassen und dem Verwechseln von Vorlagen und Logik zwischen Frontend und Backend viel einfacher ist - und dass Sie so viel Logik wie möglich im Backend behalten wenn Ihr Frontend flexibler sein muss (z. B. Schreiben eines Android-Frontends oder Wechseln zu einem anderen Frontend-Framework).

Philosophie, Mann :)

ps: du musst nicht 100% sauberen Code implementieren, weil es sehr teuer ist - besonders wenn du Teammitglieder motivieren musst;) aber: du solltest ein gutes Gleichgewicht zwischen einem Ansatz für saubereren Code und dem finden, was du hast (vielleicht auch) ist schon ziemlich sauber)

Überprüfen Sie das Buch, wenn Sie können, und lassen Sie es in Ihre Seele eindringen: https://de.wikipedia.org/wiki/Clean_Code