Pengikatan HTML sudut

841

Saya menulis aplikasi Angular dan saya memiliki respons HTML yang ingin saya tampilkan.

Bagaimana aku melakukan itu? Jika saya hanya menggunakan sintaks yang mengikat {{myVal}}itu mengkodekan semua karakter HTML (tentu saja).

Saya perlu entah bagaimana untuk mengikat innerHTMLdari divnilai variabel.

Aviad P.
sumber
Posting terkait untuk mendapatkan CSS yang didefinisikan dalam komponen agar berfungsi dengan benar di HTML binding stackoverflow.com/questions/36265026/…
y3sh
1
Saya mengumpulkan tanggapan video untuk menjelaskan solusinya dan memberikan contoh: youtube.com/watch?v=Pem2UXp7TXA
Caleb Grams
bagaimana jika variabel menyimpan tag sudut atau tag yang ditentukan pengguna seperti <span [routerLink] = ['some-router']> tautan </span>
G. Muqtada

Jawaban:

1338

Sintaks yang benar adalah sebagai berikut:

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

Referensi Dokumentasi

prolink007
sumber
14
Apakah ada cara saya bisa memaksa sudut untuk menjalankan ikatannya pada elemen-elemen dari dalamHTHTML itu? Saya perlu menggunakan <a [router-link[="..."> </a>, dan ingin menyediakannya dari html eksternal.
thouliha
4
@thouliha Saya akan merekomendasikan memulai posting baru tentang pertanyaan Anda.
prolink007
4
Ini membuat string dalam kasus saya, tetapi melakukan sesuatu pada markup. Tampaknya telah menghapus atribut pada markup. Saya menggunakan 2.4.6
paqogomez
2
@ paqogomez Ya, menghapus apa pun yang dianggapnya tidak aman
Juan Mendes
312

Final Angular 2.0.0 dan Angular 4.0.0

Untuk konten yang aman saja

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

DOMSanitizer

Potensi HTML yang tidak aman perlu secara eksplisit ditandai sebagai tepercaya menggunakan Angulars DOM sanitizer sehingga tidak menghapus bagian yang berpotensi tidak aman dari konten

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

dengan pipa seperti

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

Lihat juga Di RC.1 beberapa gaya tidak dapat ditambahkan menggunakan sintaks yang mengikat

Dan dokumen: https://angular.io/api/platform-browser/DomSanitizer

Peringatan keamanan

Pengguna percaya menambahkan HTML dapat menimbulkan risiko keamanan. Status dokumen yang disebutkan sebelumnya :

Memanggil salah satu bypassSecurityTrust...API akan menonaktifkan sanitasi bawaan Angular untuk nilai yang diteruskan. Dengan hati-hati periksa dan audit semua nilai dan jalur kode yang masuk ke panggilan ini. Pastikan semua data pengguna lolos dengan tepat untuk konteks keamanan ini. Untuk detail lebih lanjut, lihat Panduan Keamanan .

Markup sudut

Sesuatu seperti

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

dengan

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

tidak akan menyebabkan Angular memproses apa pun yang khusus untuk Angularfoo . Angular menggantikan markup spesifik sudut pada waktu pembuatan dengan kode yang dihasilkan. Markup yang ditambahkan saat runtime tidak akan diproses oleh Angular .

Untuk menambahkan HTML yang berisi markup spesifik sudut (pengikatan properti atau nilai, komponen, arahan, pipa, ...) diperlukan untuk menambahkan modul dinamis dan mengkompilasi komponen saat runtime. Jawaban ini memberikan detail lebih lanjut. Bagaimana cara menggunakan / membuat template dinamis untuk mengkompilasi Komponen dinamis dengan Angular 2.0?

Günter Zöchbauer
sumber
13
Ini seharusnya jawabannya. Perhatikan dua baris yang dikomentari. Ini sebenarnya yang kedua yang menangani HTML.
paqogomez
8
pastikan untukimport { BrowserModule, DomSanitizer } from '@angular/platform-browser'
paqogomez
4
Jugaimport { Pipe } from '@angular/core'
Appulus
1
Ini jawabannya, di sini! Sedang mencari rincian tentang apa yang di NG2 diganti $ SCE dari NG1. ;)
jrista
2
Jawaban yang bagus Memecahkan masalah saya. Terima kasih banyak. Jika seseorang tidak yakin cara menggunakan pipa dalam komponen (seperti saya): angular.io/guide/pipes Cukup tambahkan ke deklarasi Anda di modul dan voilá yang sesuai!
Alejandro Nagy
169

[innerHtml] adalah pilihan yang bagus dalam banyak kasus, tetapi gagal dengan string yang sangat besar atau ketika Anda membutuhkan gaya hard-coded di html.

Saya ingin berbagi pendekatan lain:

Yang perlu Anda lakukan adalah membuat div di file html Anda dan berikan beberapa id:

<div #dataContainer></div>

Kemudian, di komponen Angular 2 Anda, buat referensi ke objek ini (Ketik Script di sini):

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

Kemudian cukup gunakan loadDatafungsi untuk menambahkan beberapa teks ke elemen html.

Ini hanya cara yang akan Anda lakukan menggunakan javascript asli, tetapi dalam lingkungan Angular. Saya tidak merekomendasikannya, karena membuat kode lebih berantakan, tetapi terkadang tidak ada pilihan lain.

Lihat juga Angular 2 - gaya dalamHTML

Piotrek
sumber
1
Saya tidak melihat perbedaan dengan solusi lain kecuali bahwa Anda mengakses properti nativeElementsecara langsung yang dianggap praktik buruk. Saya yakin [innerHTML]="..."melakukan hal yang sama di bawah tenda tetapi dengan cara latihan Angular2 yang baik.
Günter Zöchbauer
1
Bukan itu cara kerja Angular2. HTML yang Anda tambahkan ke templat komponen Angular2 pertama kali diproses oleh Angular dan hanya setelah itu ditambahkan ke DOM. Apakah Anda benar-benar mengalami masalah dengan [innerHTML]dan string besar di Angular2?
Günter Zöchbauer
1
Saya pikir ini harus dilaporkan sebagai bug. Terima kasih telah memposting hasil Anda.
Günter Zöchbauer
25
[innerHtml]menghapus gaya hard-coded di Html. Untuk mengintegrasikan editor wysiwyg, saya harus menggunakan pendekatan yang tercantum di sini.
Jony Adamit
2
Bagi saya solusi ini bekerja untuk memasukkan dokumen SVG inline, sedangkan [innerHTML]pendekatannya tidak.
Jared Phelps
54

Pada [email protected]:

Binding-Html tidak akan berfungsi saat menggunakan {{interpolation}}, gunakan "Ekspresi" sebagai gantinya:

tidak valid

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

-> melempar kesalahan (Interpolasi alih-alih Ekspresi yang diharapkan)

benar

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

-> ini adalah cara yang benar.

Anda dapat menambahkan elemen tambahan ke ekspresi, seperti:

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

petunjuk

HTML yang ditambahkan menggunakan [innerHTML](atau ditambahkan secara dinamis dengan cara lain yang element.appenChild()serupa atau serupa) tidak akan diproses oleh Angular dengan cara apa pun kecuali sanitasi untuk tujuan keamanan.
Hal-hal seperti itu hanya berfungsi ketika HTML ditambahkan secara statis ke templat komponen. Jika Anda memerlukan ini, Anda dapat membuat komponen saat runtime seperti dijelaskan di Bagaimana saya bisa menggunakan / membuat template dinamis untuk mengkompilasi Komponen dinamis dengan Angular 2.0?

jvoigt
sumber
1
Diedit setelah mencoba lagi. Solusi ditemukan :)
jvoigt
3
Contoh ketiga tidak berfungsi. Ekspresi tidak dievaluasi. Outputnya hanyalah string ... Adakah cara lain untuk menggabungkanHTHTML tepercaya dengan elemen tag lain?
Kévin Vilela Pinto
25

Menggunakan [innerHTML] secara langsung tanpa menggunakan pembersih DOM Angular bukanlah suatu opsi jika mengandung konten yang dibuat pengguna. Pipa safeHtml yang disarankan oleh @ GünterZöchbauer dalam jawabannya adalah salah satu cara untuk membersihkan konten. Arahan berikut adalah satu lagi:

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

Untuk digunakan

<div [safeHtml]="myVal"></div>
Rene Hamburger
sumber
Saya mencoba menggunakan ini tetapi saya mendapatkan kesalahan berikut Can't bind to 'safeHtml' since it isn't a known property of 'div'. ng-versi 2.4.4
LearnToday
1
@ObasiObenyOj Anda masih dapat melakukannya tanpa menggunakan arahan terpisah jika merupakan kasus terbatas, constructor( private sanitizer: Sanitizer) {} dan mengikat hasilnya menjadi apa pun yang Anda butuhkan, juga penggunaan ElementRef sangat tidak disarankan.
Vale Steve
22

Silakan merujuk ke jawaban lain yang lebih mutakhir.

Ini bekerja untuk saya: <div innerHTML = "{{ myVal }}"></div>(Angular2, Alpha 33)

Menurut SO lain: Memasukkan HTML dari server ke DOM dengan angular2 (manipulasi DOM umum di Angular2) , "inner-html" setara dengan "ng-bind-html" di Angular 1.X

Fan Li
sumber
Cara yang benar adalah tanpa {{}}: <div innerHTML = "myVal"> </div>
Christian Benseler
2
Gunakan sintaks yang mengikat [properti] alih-alih {{interpolation}}
superluminary
Ini jelas cara yang salah untuk melakukannya dan harus diturunkan. Ini akan membuat semua html Anda di dalam atribut div!
AsGoodAsItGets
11

Hanya untuk membuat jawaban yang lengkap, jika konten html Anda ada dalam variabel komponen, Anda juga bisa menggunakan:

<div [innerHTML]=componementVariableThatHasTheHtml></div>
Serj Sagan
sumber
10

Saya minta maaf jika saya kehilangan poin di sini, tetapi saya ingin merekomendasikan pendekatan yang berbeda:

Saya pikir lebih baik mengembalikan data mentah dari aplikasi sisi server Anda dan mengikatnya ke templat di sisi klien. Ini membuat permintaan lebih gesit karena Anda hanya mengembalikan json dari server Anda.

Bagi saya sepertinya tidak masuk akal untuk menggunakan Angular jika semua yang Anda lakukan adalah mengambil html dari server dan menyuntikkannya "sebagaimana adanya" ke DOM.

Saya tahu Angular 1.x memiliki html mengikat, tetapi saya belum melihat rekan di Angular 2.0. Mereka mungkin menambahkannya nanti. Bagaimanapun, saya masih akan mempertimbangkan data api untuk aplikasi Angular 2.0 Anda.

Saya punya beberapa sampel di sini dengan beberapa data sederhana yang mengikat jika Anda tertarik: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

TGH
sumber
28
Pasti ada kasus penggunaan di mana Anda ingin mengambil dan menampilkan html mentah. Misalnya mengambil sepotong artikel yang diformat dari jarak jauh.
Alexander Chen
2
Skenario lain yang sering diabaikan adalah melindungi logika bisnis dalam template, Anda kadang-kadang tidak ingin pengguna yang tidak sah melihat logika yang Anda gunakan untuk menampilkan informasi, jadi Anda lebih suka menyiapkan tampilan di sisi server
Ayyash
2
Juga, menampilkan email HTML, misalnya - titik / pertanyaan yang adil!
a darren
2
Jika Anda kehilangan poin (yang tampaknya Anda terima sendiri), lalu mengapa mengirim tanggapan? Jelas sudut Angular adalah menggunakan mesin pandangannya untuk mengikat dan merender data. Tetapi mengingat fakta bahwa ada banyak aplikasi di mana aplikasi Angular mungkin digunakan, sebenarnya layak bahwa satu atau dua dari mereka mungkin memiliki persyaratan bahwa beberapa data yang perlu ditampilkan dalam aplikasi Anda mungkin sudah diformat HTML, dan mungkin saja itu merupakan kasus di mana pengembang tidak memiliki kendali atas konten itu. Dengan kata lain ... pertanyaan yang relevan.
Gregor
Ya kita harus membuang saja Sudut dan menggunakan JQuery karena Jquery melakukan hal yang lebih baik ini ...
Simon_Weaver
9

Jawaban singkat sudah disediakan di sini: gunakan <div [innerHTML]="yourHtml">penjilidan.

Namun saran lain yang disebutkan di sini mungkin menyesatkan. Angular memiliki mekanisme sanitasi bawaan ketika Anda mengikat properti seperti itu. Karena Angular bukan perpustakaan sanitasi yang berdedikasi, itu terlalu bersemangat untuk konten yang mencurigakan untuk tidak mengambil risiko. Misalnya, itu membersihkan semua konten SVG menjadi string kosong.

Anda mungkin mendengar saran untuk "membersihkan" konten Anda dengan menggunakan DomSanitizeruntuk menandai konten sebagai aman dengan bypassSecurityTrustXXXmetode. Ada juga saran untuk menggunakan pipa untuk melakukan itu dan pipa itu sering disebut safeHtml.

Semua ini menyesatkan karena sebenarnya memotong sanitasi , bukan membersihkan konten Anda. Ini bisa menjadi masalah keamanan karena jika Anda melakukan ini pada konten yang disediakan pengguna atau pada apa pun yang Anda tidak yakin - Anda membuka diri untuk serangan kode berbahaya.

Jika Angular menghapus sesuatu yang Anda butuhkan dengan sanitasi bawaan - yang dapat Anda lakukan alih-alih menonaktifkannya adalah mendelegasikan sanitasi aktual ke perpustakaan khusus yang ahli dalam tugas itu. Misalnya - DOMPurify.

Saya telah membuat perpustakaan pembungkus untuk itu sehingga dapat dengan mudah digunakan dengan Angular: https://github.com/TinkoffCreditSystems/ng-dompurify

Ini juga memiliki pipa untuk membersihkan HTML secara deklaratif:

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

Perbedaan dengan pipa yang disarankan di sini adalah bahwa itu benar-benar melakukan sanitasi melalui DOMPurify dan karenanya bekerja untuk SVG.

Satu hal yang perlu diingat adalah DOMPurify sangat bagus untuk membersihkan HTML / SVG, tetapi tidak untuk CSS. Jadi, Anda dapat menyediakan pembersih CSS Angular untuk menangani CSS:

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

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

Ini adalah ɵawalan internal-padat , tetapi ini adalah cara tim Angular menggunakannya di paket mereka sendiri juga. Perpustakaan itu juga berfungsi untuk Angular Universal dan lingkungan sisi server renedring.

semangka
sumber
5

Cukup gunakan [innerHTML]atribut dalam HTML Anda , sesuatu seperti ini di bawah ini:

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

Pernahkah ada properti di komponen Anda yang berisi beberapa markup html atau entitas yang perlu Anda tampilkan di template Anda? Interpolasi tradisional tidak akan berfungsi, tetapi pengikatan properti innerHTML datang untuk menyelamatkan.

Menggunakan {{myVal}} TIDAK berfungsi seperti yang diharapkan! Ini tidak akan mengambil tag HTML seperti <p>, <strong>dll dan meneruskannya hanya sebagai string ...

Bayangkan Anda memiliki kode ini di komponen Anda:

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

Jika Anda menggunakan {{myVal}}, Anda akan mendapatkan ini dalam tampilan:

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

tetapi menggunakan [innerHTML]="myVal"membuat hasil seperti yang diharapkan seperti ini:

Stackoverflow sangat membantu!

Alireza
sumber
Bagaimana Anda membuat konten Anda ditampilkan jika Anda menginginkannya tanpa div kontainer? Apakah itu mungkin?
Ε Г И І И О
3

Anda dapat menerapkan beberapa pipa untuk gaya, tautan, dan HTML sebagai berikut di .html

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

dan dalam pipa .ts untuk pembersih '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);
    }
}

pipa untuk pembersih '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);
    }
}

ini akan berlaku baik tanpa mengganggu gaya apa pun dan tautan acara klik

Sahil Ralkar
sumber
2

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

The innerHtml adalah properti dari HTML-Elements, yang memungkinkan Anda untuk mengatur itu html-konten programatik. Ada juga properti innerText yang mendefinisikan konten sebagai teks biasa.

Itu [attributeName]="value" kotak braket, sekitar atribut mendefinisikan sudut input-mengikat. Itu berarti, bahwa nilai properti (dalam kasus Anda innerHtml) terikat dengan ekspresi yang diberikan, ketika hasil ekspresi berubah, nilai properti juga berubah.

Jadi pada dasarnya [innerHtml]memungkinkan Anda untuk mengikat dan secara dinamis mengubah html-conent dari HTML-Element yang diberikan.

Supriya
sumber
1

Di Angular 2 Anda dapat melakukan 3 jenis binding:

  • [property]="expression"-> Setiap properti html dapat ditautkan ke
    ekspresi. Dalam kasus ini, jika ekspresi perubahan properti akan memperbarui, tetapi ini tidak bekerja sebaliknya.
  • (event)="expression" -> Ketika acara diaktifkan, jalankan ekspresi.
  • [(ngModel)]="property"-> Mengikat properti dari js (atau ts) ke html. Setiap pembaruan pada properti ini akan terlihat di mana-mana.

Ekspresi dapat berupa nilai, atribut, atau metode. Misalnya: '4', 'controller.var', 'getValue ()'

Contoh di sini

adrison
sumber
0

Cara menambahkan elemen secara dinamis ke DOM, seperti yang dijelaskan pada Angular 2 doc, adalah dengan menggunakan kelas ViewContainerRef dari @ Angular / core.

Yang harus Anda lakukan adalah mendeklarasikan arahan yang akan mengimplementasikan ViewContainerRef dan bertindak seperti placeholder di DOM Anda.

Pengarahan

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

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

  constructor(public viewContainerRef: ViewContainerRef) { }

}

Lalu, di templat tempat Anda ingin menyuntikkan komponen:

HTML

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

Kemudian, dari kode komponen yang disuntikkan, Anda akan menyuntikkan komponen yang berisi HTML yang Anda inginkan:

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

}

Saya menambahkan aplikasi demo yang berfungsi penuh pada Angular 2 secara dinamis menambahkan komponen ke demo DOM

BogdanC
sumber
0

Anda dapat menggunakan beberapa pendekatan untuk mencapai solusi. Seperti yang sudah dikatakan dalam jawaban yang disetujui, Anda dapat menggunakan:

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

tergantung pada apa yang ingin Anda capai, Anda juga dapat mencoba hal-hal lain seperti javascript DOM (tidak disarankan, operasi DOM lambat):

Presentasi

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

Komponen

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

Binding Properti

Javascript DOM Outer HTML

João Beirão
sumber
Terlepas dari apakah operasi DOM lebih lambat dari sudut atau tidak, melakukannya dengan menggunakan getElementsByIdatau metode pemilihan lainnya buruk karena mungkin menangkap elemen yang dimiliki komponen yang sama sekali berbeda jika mengandung elemen dengan id yang sama (atau kriteria lain).
Aviad P.
Plus itu benar-benar berkinerja di luar zona sudut mana pun sehingga perubahan tidak akan diambil.
Philipp Meissner
0

Kami selalu dapat meneruskan konten html ke innerHTMLproperti untuk merender konten dinamis html tetapi konten html dinamis itu juga dapat terinfeksi atau berbahaya. Jadi sebelum meneruskan konten dinamis ke innerHTMLkita harus selalu memastikan konten tersebut disanitasi (menggunakan DOMSanitizer) sehingga kita dapat lolos dari semua konten berbahaya.

Coba di bawah pipa:

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>
Suneet Bansal
sumber
Ini perlu bahkan ketika Anda mungkin berpikir tidak. Misalnya style: background-colorsemua hal bisa dihapus dan jadi sebaiknya mulai menggunakan ini dari awal atau Anda akan menjadi sangat bingung nanti.
Simon_Weaver
Yang saya pahami adalah skrip ini adalah untuk mengizinkan semua konten berbahaya (bypassSecurityTrustHtml), saat Anda menunjukkan ini, saya pikir pipa ini tidak diperlukan kecuali Anda memercayai sumbernya. referto
Sae
0

Jika Anda menginginkannya dalam Angular 2 atau Angular 4 dan juga ingin menyimpan inline CSS maka Anda dapat menggunakannya

<div [innerHTML]="theHtmlString | keepHtml"></div>
Jay Momaya
sumber
Ini memberi saya kesalahan `Tidak tertangkap (dalam janji): Kesalahan: Kesalahan parse templat: Pipa 'keepHtml' tidak dapat ditemukan`
Praveen
impor {Pipe, PipeTransform} dari "@ angular / core";
Jay Momaya
0

Bekerja di Angular v2.1.1

<div [innerHTML]="variable or htmlString">
</div>
FACode
sumber
2
Ini menghasilkan: <div _ngcontent-luf-0=""></div>untuk saya. Itu divkosong.
Scott Marcus
-2

Jika Anda memiliki template di aplikasi sudut (atau kerangka kerja apa pun) Anda, dan Anda mengembalikan template HTML dari backend Anda melalui permintaan / respons HTTP, Anda sedang mencampur template antara frontend dan backend.

Mengapa tidak meninggalkan barang-barang templating baik di frontend (saya akan menyarankan itu), atau di backend (imo cukup transparan)?

Dan jika Anda menyimpan templat di frontend, mengapa tidak merespons dengan JSON untuk permintaan ke backend. Anda bahkan tidak harus mengimplementasikan struktur RESTful, tetapi menjaga templat di satu sisi membuat kode Anda lebih transparan.

Ini akan membayar kembali ketika orang lain harus mengatasi kode Anda (atau bahkan Anda sendiri memasukkan kembali kode Anda sendiri setelah beberapa saat)!

Jika Anda melakukannya dengan benar, Anda akan memiliki komponen kecil dengan templat kecil, dan yang paling penting, jika kode Anda imba, seseorang yang tidak tahu bahasa pengkodean akan dapat memahami templat dan logika Anda! Jadi tambahan, jaga fungsi / metode Anda sekecil mungkin. Anda pada akhirnya akan mengetahui bahwa memelihara, refactoring, meninjau, dan menambahkan fitur akan jauh lebih mudah dibandingkan dengan fungsi / metode / kelas besar dan mencampuradukkan templating dan logika antara frontend dan backend - dan menjaga sebanyak mungkin logika di backend jika frontend Anda harus lebih fleksibel (misalnya menulis frontend android atau beralih ke kerangka frontend yang berbeda).

Filsafat, teman :)

ps: Anda tidak harus menerapkan kode bersih 100%, karena sangat mahal - terutama jika Anda harus memotivasi anggota tim;) tetapi: Anda harus menemukan keseimbangan yang baik antara pendekatan kode bersih dan apa yang Anda miliki (mungkin itu sudah cukup bersih)

periksa buku jika Anda bisa dan biarkan masuk ke jiwa Anda: https://de.wikipedia.org/wiki/Clean_Code

Guntram
sumber
Kadang-kadang perlu untuk mendapatkan HTML dari sisi server ketika Anda berurusan dengan API lama seperti di SOAP. Saya sedang mengerjakan satu proyek saya dengan BSC (Bharat Stock Exchange) dan mereka mengembalikan kode HTML halaman bank sambil melakukan pembayaran. Jadi Anda tidak dapat mengubah API mereka, Anda telah memperbarui kode Anda sesuai.
Mahendra Waykos
Anda bisa menulis middleware yang sering menanyakan api sabun, dan memberikan hasil yang diekstraksi dalam soket misalnya. Mengonsumsi dan mengekstraksi informasi melalui sabun bisa sangat menyebalkan.
Guntram
Kasus penggunaan yang jelas sangat besar untuk markup mentah adalah ketika markup Anda berasal dari CMS dan ditulis dalam editor WYSIWYG. Anda mungkin melayani beberapa titik akhir dari CMS tanpa kepala, misalnya. Hal semacam inilah yang menyebabkan setiap mesin templating memiliki opsi untuk markup mentah.
gburton