Açısal HTML bağlama

Açısal bir uygulama yazıyorum ve görüntülemek istediğim bir HTML yanıtım var.

Bunu nasıl yaparım? Eğer sadece bağlayıcı sözdizimini kullanırsam, {{myVal}}tüm HTML karakterlerini (elbette) kodlar.

Bir şekilde bağlamak için innerHTMLbir divdeğişken değerine ihtiyacım var.

Doğru sözdizimi şöyledir:

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

Dokümantasyon Referansı

Açısal 2.0.0 ve Açısal 4.0.0 final

Yalnızca güvenli içerik için

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

DOMSanitizer

Güvenli olmayan potansiyel HTML'nin Angulars DOM dezenfektanı kullanılarak açıkça güvenilir olarak işaretlenmesi gerekir, bu nedenle içeriğin potansiyel olarak güvenli olmayan kısımlarını çıkarmaz

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

gibi bir boru ile

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

Ayrıca bkz . RC.1'de bazı stiller bağlayıcı sözdizimi kullanılarak eklenemez

Ve dokümanlar: https://angular.io/api/platform-browser/DomSanitizer

Güvenlik uyarısı

Kullanıcı tarafından eklenen HTML'ye güvenmek bir güvenlik riski oluşturabilir. Daha önce belirtilen dokümanlar şunları belirtir :

bypassSecurityTrust...API'lerden herhangi birinin çağrılması , Angular'ın aktarılan değer için dahili temizliğini devre dışı bırakır. Bu çağrıya giden tüm değerleri ve kod yollarını dikkatlice kontrol edin ve denetleyin. Bu güvenlik bağlamı için tüm kullanıcı verilerinin uygun şekilde kaçıldığından emin olun. Daha fazla ayrıntı için Güvenlik Kılavuzu'na bakın .

Açısal işaretleme

Gibi bir şey

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

ile

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

Açısal'ın, Açısal özel bir şeyi işlemesine neden olmazfoo . Açısal Oluşturma sırasındaki açısal özel işaretlemeyi oluşturulan kodla değiştirir. Çalışma zamanında eklenen işaretleme Angular tarafından işlenmez .

Açısal özel işaretleme (özellik veya değer bağlama, bileşenler, yönergeler, borular, ...) içeren HTML eklemek için, dinamik modülü eklemek ve bileşenleri çalışma zamanında derlemek gerekir. Bu yanıt daha fazla ayrıntı sağlar Dinamik Bileşeni Angular 2.0 ile derlemek için dinamik şablonu nasıl kullanabilir / oluşturabilirim?

[innerHtml] çoğu durumda harika bir seçenektir, ancak gerçekten büyük dizelerle veya html'de sabit kodlu stile ihtiyacınız olduğunda başarısız olur.

Başka bir yaklaşımı paylaşmak istiyorum:

Tek yapmanız gereken html dosyanızda bir div oluşturmak ve ona bir kimlik vermek:

<div #dataContainer></div>

Ardından, Açısal 2 bileşeninizde bu nesneye referans oluşturun (buraya 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;
    }
}

Ardından loadData, html öğesine bazı metinler eklemek için işlevi kullanın.

Bu, yerel javascript kullanarak yapmanın bir yoludur, ancak Açısal ortamda. Bunu tavsiye etmiyorum, çünkü kodu daha dağınık yapar, ancak bazen başka bir seçenek yoktur.

Ayrıca bkz. Açısal 2 - iç HTML stili

Açısal2@2.0.0- alfa.44:

Html-Binding bir kullanırken çalışmaz {{interpolation}}, bunun yerine bir "İfade" kullanın:

geçersiz

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

-> bir hata atar (Beklenen İfade yerine enterpolasyon)

doğru

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

-> bu doğru yoldur.

ifadeye aşağıdaki gibi ek öğeler ekleyebilirsiniz:

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

ipucu

Kullanılarak eklenen [innerHTML](veya element.appenChild()benzer veya benzeri başka yollarla dinamik olarak eklenen) HTML , güvenlik amacıyla sterilizasyon dışında hiçbir şekilde Angular tarafından işlenmez.
Bu tür şeyler yalnızca HTML bir bileşen şablonuna statik olarak eklendiğinde çalışır. Buna ihtiyacınız varsa, çalışma zamanında Dinamik Bileşeni Angular 2.0 ile derlemek için nasıl dinamik şablon kullanabilir / oluşturabilirim? Bölümünde açıklandığı gibi bir bileşen oluşturabilirsiniz.

Angular'ın DOM dezenfektanını kullanmadan doğrudan [innerHTML] kullanmak, kullanıcı tarafından oluşturulan içerik içeriyorsa bir seçenek değildir. @ GünterZöchbauer önerdiği SafeHTML'deki boru onun cevabını içerik sterilize bir yoludur. Aşağıdaki direktif başka bir direktiftir:

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

Kullanılacak olan

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

Lütfen daha güncel olan diğer yanıtlara başvurun.

Bu benim için çalışıyor: <div innerHTML = "{{ myVal }}"></div>(Angular2, Alpha 33)

Başka bir SO: Angular2 (Angular2'de genel DOM manipülasyonu) ile sunucudan HTML'ye HTML eklemek , "inner-html", Angular 1.X'te "ng-bind-html" ile eşdeğerdir

Tam bir yanıt vermek için, html içeriğiniz bir bileşen değişkenindeyse, şunları da kullanabilirsiniz:

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

Buradaki noktayı kaçırırsam özür dilerim, ancak farklı bir yaklaşım önermek isterim:

Ham veriyi sunucu tarafı uygulamanızdan döndürmek ve istemci tarafındaki bir şablona bağlamak daha iyi olduğunu düşünüyorum. Bu, sunucunuzdan yalnızca json döndürdüğünüz için daha çevik isteklerde bulunur.

Bana göre sunucudan html alıp DOM'a "olduğu gibi" enjekte ediyorsa Angular'ı kullanmak mantıklı görünmüyor.

Angular 1.x'in html bağlaması olduğunu biliyorum, ancak Angular 2.0'da henüz bir muadil görmedim. Daha sonra ekleyebilirler. Her neyse, Angular 2.0 uygulamanız için hala bir veri API'si düşünürdüm.

Eğer ilgileniyorsanız burada bazı basit veri bağlama ile birkaç örnek var: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

Kısa cevap zaten burada verilmiştir: <div [innerHTML]="yourHtml">bağlama kullanın .

Ancak burada belirtilen diğer öneriler yanıltıcı olabilir. Angular, bu gibi özelliklere bağlandığınızda yerleşik bir dezenfeksiyon mekanizmasına sahiptir. Angular adanmış bir hijyen kütüphanesi olmadığından, şüpheli içeriğe herhangi bir risk almama konusunda aşırı heveslidir. Örneğin, tüm SVG içeriğini boş dizeye temizler.

DomSanitizerİçeriği bypassSecurityTrustXXXyöntemlerle güvenli olarak işaretlemek için kullanarak içeriğinizi "sterilize" etmek için tavsiyeler duyabilirsiniz . Bunu yapmak için boru kullanma önerileri de vardır ve bu boruya sıklıkla denir safeHtml.

Tüm bunlar yanıltıcıdır, çünkü aslında içeriğinizi dezenfekte etmek yerine sanitizasyonu atlar . Bu bir güvenlik sorunu olabilir, çünkü bunu kullanıcı tarafından sağlanan içerikte veya emin olmadığınız herhangi bir şeyde yaparsanız - kendinizi kötü amaçlı kod saldırılarına açarsınız.

Angular, dahili dezenfeksiyonu ile ihtiyacınız olan bir şeyi kaldırırsa - devre dışı bırakmak yerine yapabileceğiniz şey, gerçek dezenfeksiyonunu bu görevde iyi olan özel bir kütüphaneye devretmektir. Örneğin - DOMPurify.

Bunun için bir paketleyici kitaplığı yaptım, böylece Angular ile kolayca kullanılabilir: https://github.com/TinkoffCreditSystems/ng-dompurify

Ayrıca, HTML'yi bildirerek sterilize etmek için bir borusu vardır:

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

Burada önerilen borular arasındaki fark, aslında DOMPurify aracılığıyla sanitizasyon yapması ve bu nedenle SVG için çalışmasıdır.

Akılda tutulması gereken bir şey DOMPurify, HTML / SVG'yi sterilize etmek için harika, ancak CSS değil. Böylece, CSS'yi işlemek için Angular'ın CSS dezenfektanını sağlayabilirsiniz:

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

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

Bu iç hense ɵönekidir, ancak Angular ekibi bunu kendi paketlerinde de böyle kullanır. Bu kütüphane aynı zamanda Angular Universal ve sunucu tarafı yenileme ortamı için de kullanılabilir.

HTML'nizde aşağıdaki gibi bir [innerHTML]özellik kullanmanız yeterlidir :

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

Hiç bileşeninizde, şablonunuzda görüntülemeniz gereken bazı html işaretlemeleri veya varlıkları içeren özellikler vardı mı? Geleneksel enterpolasyon çalışmaz, ancak innerHTML özelliği bağlama kurtarmaya gelir.

Kullanılması {{myVal}} etmez çalışmaları beklendiği gibi! Bu , vb. Gibi HTML etiketlerini almaz ve yalnızca dizeler olarak geçirmez ...<p><strong>

Bileşeninizde bu kodun olduğunu düşünün:

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

Kullanırsanız {{myVal}}, bunu görünümde alacaksınız:

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

ancak kullanmak [innerHTML]="myVal"sonucu beklendiği gibi yapar:

Stackoverflow olduğunu yararlı!

.Html'de aşağıdaki gibi stil, bağlantı ve HTML için birden çok yöneltme uygulayabilirsiniz

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

ve 'URL' dezenfektanı için .ts borusunda

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' dezenfektanı için boru

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

bu, herhangi bir stili ve bağlantı tıklama etkinliğini rahatsız etmeden uygulanacaktır

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

İnnerHTML Eğer programlama yoluyla html-İçeriğin ayarlamanızı sağlar HTML Elements, bir özelliktir. İçeriği düz metin olarak tanımlayan bir innerText özelliği de vardır.

Özelliği [attributeName]="value"çevreleyen kutu köşeli ayraç, bir Açısal giriş bağlaması tanımlar. Bu, özelliğin değerinin (sizin durumunuz innerHtml) verilen ifadeye bağlı olduğu anlamına gelir, ifade sonucu değiştiğinde özellik değeri de değişir.

Temel [innerHtml]olarak, verilen HTML Öğesinin html-conentini bağlamanıza ve dinamik olarak değiştirmenize izin verir.

Gelen açısal 2 sen bağlamaları 3 tip yapabilirsiniz:

• [property]="expression"-> Herhangi bir html özelliği bir
  ifadeye bağlanabilir . Bu durumda, ifade değişiklikleri özelliği güncellenir, ancak bu başka şekilde çalışmaz.
• (event)="expression" -> Olay etkinleştirildiğinde ifadeyi yürütün.
• [(ngModel)]="property"-> Özelliği js (veya ts) 'den html'ye bağlar. Bu mülkle ilgili herhangi bir güncelleme her yerde farkedilir.

İfade bir değer, nitelik veya yöntem olabilir. Örneğin: '4', 'controller.var', 'getValue ()'

Burada örnek

Angular 2 belgesinde açıklandığı gibi DOM'a dinamik olarak öğe eklemenin yolu @ Angular / core'dan ViewContainerRef sınıfını kullanmaktır.

Yapmanız gereken ViewContainerRef'i uygulayacak ve DOM'nizde yer tutucu gibi davranacak bir yönerge bildirmektir.

Direktif

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

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

  constructor(public viewContainerRef: ViewContainerRef) { }

}

Ardından, bileşeni enjekte etmek istediğiniz şablonda:

HTML

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

Ardından, enjekte edilen bileşen kodundan, istediğiniz HTML'yi içeren bileşeni enjekte edersiniz:

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'ye tamamen çalışan bir demo uygulaması ekledim ve DOM demosuna dinamik olarak bileşen ekledim

Çözüme ulaşmak için çeşitli yaklaşımlar kullanabilirsiniz. Onaylanmış cevapta daha önce de belirtildiği gibi şunları kullanabilirsiniz:

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

elde etmeye çalıştığınız şeye bağlı olarak, javascript DOM gibi başka şeyler de deneyebilirsiniz (önerilmez, DOM işlemleri yavaştır):

Sunum

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

Bileşen

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

Mülkiyet Bağlama

Javascript DOM Dış HTML

innerHTMLHtml dinamik içeriğini oluşturmak için html içeriğini her zaman mülke aktarabiliriz, ancak bu dinamik html içeriğine de virüs bulaşabilir veya kötü amaçlı olabilir. Bu nedenle, dinamik içeriği innerHTMLiletmeden DOMSanitizerönce, tüm kötü niyetli içeriklerden kaçabilmemiz için içeriğin her zaman temizlendiğinden (kullandığından ) emin olmalıyız.

Borunun altında deneyin:

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>

Bunu Açısal 2 veya Açısal 4'te istiyorsanız ve aynı zamanda satır içi CSS'de tutmak istiyorsanız

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

Açısal bileşen sınıfı özelliklerini aşağıdaki gibi standart form kullanarak şablonla da bağlayabilirsiniz:

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

Açısal Belgeler: https://angular.io/guide/template-syntax#property-binding-property

Burada çalışan stackblitz örneğine bakın

Açısal Çalışma v2.1.1

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

Açısal (veya herhangi bir çerçeve) uygulamanızda şablonlarınız varsa ve HTML şablonlarını arka ucunuzdan bir HTTP isteği / yanıtı aracılığıyla döndürürseniz, şablonlar ön uç ve arka uç arasında karıştırıyorsunuz demektir.

Neden sadece ön uçlarda (bunu öneririm) ya da arka uçta (oldukça şeffaf olmayan imo) cazip şeyler bırakmıyorsunuz?

Şablonları ön uçta tutarsanız, neden arka uç istekleri için JSON ile yanıt vermiyorsunuz? RESTful bir yapı uygulamak zorunda değilsiniz, ancak şablonları bir tarafta tutmak kodunuzu daha şeffaf hale getirir.

Bu, başkasının kodunuzla başa çıkmak zorunda kaldığında (ya da bir süre sonra kendi kodunuzu tekrar girdiğinizde) geri ödeme yapar!

Doğru yaparsanız, küçük şablonlara sahip küçük bileşenlere sahip olacaksınız ve en iyisi, kodunuz imba ise, kodlama dillerini bilmeyen biri şablonlarınızı ve mantığınızı anlayabilecektir! Ek olarak, işlevlerinizi / yöntemlerinizi olabildiğince küçük tutun. Sonunda, özelliklerin bakımı, yeniden düzenlenmesi, gözden geçirilmesi ve eklenmesinin, büyük işlevlere / yöntemlere / sınıflara göre çok daha kolay olacağını ve ön uç ile arka uç arasında şablonlama ve mantığı karıştırmanın daha kolay olacağını ve arka uçta mantığın çoğunu koruyacağınızı göreceksiniz. kullanıcı arabiriminizin daha esnek olması gerekiyorsa (örneğin, bir android kullanıcı arabirimi yazma veya farklı bir kullanıcı arabirimi çerçevesine geçme).

Felsefe, adam :)

ps:% 100 temiz kod uygulamak zorunda değilsiniz, çünkü çok pahalı - özellikle ekip üyelerini motive etmeniz gerekiyorsa;) ama: daha temiz bir kod yaklaşımı ile sahip olduğunuz şey arasında iyi bir denge bulmalısınız (belki de zaten oldukça temiz)

Mümkünse kitabı kontrol edin ve ruhunuzu girmesine izin verin: https://de.wikipedia.org/wiki/Clean_Code