Liên kết HTML góc

Tôi đang viết một ứng dụng Angular và tôi có phản hồi HTML tôi muốn hiển thị.

Làm thế nào để làm điều đó? Nếu tôi chỉ đơn giản sử dụng cú pháp ràng buộc {{myVal}}thì nó mã hóa tất cả các ký tự HTML (tất nhiên).

Tôi cần bằng cách nào đó để liên kết innerHTMLcủa a divvới giá trị biến.

Cú pháp đúng như sau:

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

Tài liệu tham khảo

Chung kết Angular 2.0.0 và Angular 4.0.0

Đối với nội dung an toàn chỉ

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

DOMSanitizer

HTML không an toàn tiềm năng cần được đánh dấu rõ ràng là đáng tin cậy bằng cách sử dụng trình khử trùng Angenses DOM để không loại bỏ các phần có thể không an toàn của nội dung

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

với một đường ống như

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

Xem thêm Trong RC.1, một số kiểu không thể được thêm bằng cú pháp ràng buộc

Và tài liệu: https://angular.io/api/pl platform-browser / TumSanitizer

Cảnh báo an ninh

Tin cậy người dùng thêm HTML có thể gây rủi ro bảo mật. Các tài liệu được đề cập trước đây :

Việc gọi bất kỳ bypassSecurityTrust...API nào sẽ vô hiệu hóa khử trùng tích hợp sẵn của Angular cho giá trị được truyền vào. Kiểm tra và kiểm tra cẩn thận tất cả các giá trị và đường dẫn mã đi vào cuộc gọi này. Đảm bảo mọi dữ liệu người dùng được thoát một cách thích hợp cho bối cảnh bảo mật này. Để biết thêm chi tiết, xem Hướng dẫn bảo mật .

Đánh dấu góc

Cái gì đó như

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

với

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

sẽ không khiến Angular xử lý bất cứ thứ gì cụ thể của Angularfoo . Angular thay thế đánh dấu cụ thể Angular tại thời điểm xây dựng bằng mã được tạo. Đánh dấu thêm vào thời gian chạy sẽ không được xử lý bởi Angular .

Để thêm HTML có chứa đánh dấu dành riêng cho góc (ràng buộc thuộc tính hoặc giá trị, các thành phần, chỉ thị, đường ống, ...), cần phải thêm mô-đun động và biên dịch các thành phần khi chạy. Câu trả lời này cung cấp thêm chi tiết Làm cách nào tôi có thể sử dụng / tạo mẫu động để biên dịch Thành phần động với Angular 2.0?

[innerHtml] là tùy chọn tuyệt vời trong hầu hết các trường hợp, nhưng nó thất bại với các chuỗi thực sự lớn hoặc khi bạn cần kiểu mã hóa cứng trong html.

Tôi muốn chia sẻ cách tiếp cận khác:

Tất cả những gì bạn cần làm là tạo một div trong tệp html của bạn và cung cấp cho nó một số id:

<div #dataContainer></div>

Sau đó, trong thành phần Angular 2 của bạn, tạo tham chiếu đến đối tượng này (TypeScript tại đây):

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

Sau đó, chỉ cần sử dụng loadDatachức năng để nối một số văn bản vào phần tử html.

Đó chỉ là một cách mà bạn sẽ làm bằng cách sử dụng javascript gốc, nhưng trong môi trường Angular. Tôi không khuyên bạn vì nó làm cho mã trở nên lộn xộn hơn, nhưng đôi khi không có lựa chọn nào khác.

Xem thêm Angular 2 - kiểu bên trongHTML

Trên angular2@2.0.0-alpha.44:

Html-Binding sẽ không hoạt động khi sử dụng {{interpolation}}, thay vào đó hãy sử dụng "Biểu thức":

không hợp lệ

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

-> ném lỗi (Nội suy thay vì Biểu thức dự kiến)

chính xác

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

-> đây là cách chính xác.

bạn có thể thêm các yếu tố bổ sung vào biểu thức, như:

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

dấu

HTML được thêm bằng cách sử dụng [innerHTML](hoặc được thêm động bằng các phương tiện khác element.appenChild()tương tự hoặc tương tự) sẽ không được Angular xử lý theo bất kỳ cách nào ngoại trừ vệ sinh cho mục đích bảo mật.
Những thứ như vậy chỉ hoạt động khi HTML được thêm tĩnh vào mẫu thành phần. Nếu bạn cần điều này, bạn có thể tạo một thành phần trong thời gian chạy như được giải thích trong Làm cách nào tôi có thể sử dụng / tạo mẫu động để biên dịch Thành phần động với Angular 2.0?

Sử dụng trực tiếp [InternalHTML] mà không sử dụng trình khử trùng DOM của Angular không phải là một tùy chọn nếu nó chứa nội dung do người dùng tạo. Ống safeHtml được đề xuất bởi @ GünterZöchbauer trong câu trả lời của ông là một cách vệ sinh nội dung. Lệnh sau đây là một lệnh khác:

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

Được sử dụng

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

Vui lòng tham khảo các câu trả lời khác cập nhật hơn.

Điều này làm việc cho tôi: <div innerHTML = "{{ myVal }}"></div>(Angular2, Alpha 33)

Theo một SO khác: Chèn HTML từ máy chủ vào DOM bằng angular2 (thao tác DOM chung trong Angular2) , " Internal -html" tương đương với "ng-bind-html" trong Angular 1.X

Chỉ cần đưa ra câu trả lời hoàn chỉnh, nếu nội dung html của bạn nằm trong biến thành phần, bạn cũng có thể sử dụng:

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

Tôi xin lỗi nếu tôi thiếu điểm ở đây, nhưng tôi muốn đề xuất một cách tiếp cận khác:

Tôi nghĩ tốt hơn là trả lại dữ liệu thô từ ứng dụng phía máy chủ của bạn và liên kết nó với một mẫu ở phía máy khách. Điều này làm cho các yêu cầu nhanh nhẹn hơn vì bạn chỉ trả lại json từ máy chủ của mình.

Đối với tôi, dường như không có ý nghĩa gì khi sử dụng Angular nếu tất cả những gì bạn đang làm là tìm nạp html từ máy chủ và đưa nó "như hiện tại" vào DOM.

Tôi biết Angular 1.x có ràng buộc html, nhưng tôi chưa thấy đối tác trong Angular 2.0. Họ có thể thêm nó sau mặc dù. Dù sao, tôi vẫn sẽ xem xét một api dữ liệu cho ứng dụng Angular 2.0 của bạn.

Tôi có một vài mẫu ở đây với một số ràng buộc dữ liệu đơn giản nếu bạn quan tâm: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

Câu trả lời ngắn đã được cung cấp ở đây rồi: sử dụng <div [innerHTML]="yourHtml">ràng buộc.

Tuy nhiên, phần còn lại của những lời khuyên được đề cập ở đây có thể gây hiểu nhầm. Angular có một cơ chế vệ sinh tích hợp khi bạn liên kết với các thuộc tính như thế. Vì Angular không phải là một thư viện vệ sinh chuyên dụng, nó quá nhiệt tình đối với nội dung đáng ngờ để không gặp bất kỳ rủi ro nào. Ví dụ, nó vệ sinh tất cả nội dung SVG thành chuỗi trống.

Bạn có thể nghe lời khuyên để "vệ sinh" nội dung của mình bằng cách sử dụng DomSanitizerđể đánh dấu nội dung là an toàn với bypassSecurityTrustXXXcác phương pháp. Cũng có những gợi ý sử dụng đường ống để làm điều đó và đường ống đó thường được gọi safeHtml.

Tất cả điều này là sai lệch bởi vì nó thực sự bỏ qua việc vệ sinh , không vệ sinh nội dung của bạn. Đây có thể là một mối quan tâm bảo mật bởi vì nếu bạn từng làm điều này trên nội dung do người dùng cung cấp hoặc trên bất cứ điều gì bạn không chắc chắn - bạn sẽ tự mở cho mình một cuộc tấn công mã độc.

Nếu Angular loại bỏ thứ bạn cần bằng cách khử trùng tích hợp sẵn - những gì bạn có thể làm thay vì vô hiệu hóa thì đó là ủy thác vệ sinh thực tế cho một thư viện chuyên dụng thực hiện tốt nhiệm vụ đó. Ví dụ: DOMPurify.

Tôi đã tạo một thư viện trình bao bọc cho nó để có thể dễ dàng sử dụng với Angular: https://github.com/TinkoffCreditSystems/ng-dompurify

Nó cũng có một đường ống để tuyên bố vệ sinh HTML:

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

Sự khác biệt đối với các đường ống được đề xuất ở đây là nó thực sự làm vệ sinh thông qua DOMPurify và do đó hoạt động cho SVG.

Một điều cần lưu ý là DOMPurify rất tốt cho việc vệ sinh HTML / SVG, nhưng không phải CSS. Vì vậy, bạn có thể cung cấp trình khử trùng CSS của Angular để xử lý CSS:

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

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

Đó là ɵtiền tố nội bộ , nhưng đây là cách nhóm Angular sử dụng nó trên các gói của riêng họ. Thư viện đó cũng hoạt động cho Angular Universal và môi trường đổi tên phía máy chủ.

Chỉ cần sử dụng [innerHTML]thuộc tính trong HTML của bạn , một cái gì đó như thế này dưới đây:

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

Bạn đã bao giờ có các thuộc tính trong thành phần có chứa một số đánh dấu html hoặc các thực thể mà bạn cần hiển thị trong mẫu của mình chưa? Phép nội suy truyền thống sẽ không hoạt động, nhưng ràng buộc thuộc tính bên trong đến để giải cứu.

Sử dụng {{myVal}} KHÔNG hoạt động như mong đợi! Điều này sẽ không nhận các thẻ HTML như <p>, <strong>v.v. và chỉ chuyển nó dưới dạng chuỗi ...

Hãy tưởng tượng bạn có mã này trong thành phần của bạn:

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

Nếu bạn sử dụng {{myVal}}, bạn sẽ nhận được điều này trong chế độ xem:

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

nhưng việc sử dụng [innerHTML]="myVal"làm cho kết quả như mong đợi như thế này:

Stackoverflow là hữu ích!

Bạn có thể áp dụng nhiều đường ống cho kiểu dáng, liên kết và HTML như sau trong .html

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

và trong ống .ts cho chất khử trùng '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);
    }
}

ống cho chất khử trùng '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);
    }
}

điều này sẽ áp dụng cả mà không làm phiền bất kỳ phong cách và sự kiện nhấp vào liên kết

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

Các innerHtml là một tài sản của HTML Elements, cho phép bạn thiết lập nó html-nội dung chương trình khác. Ngoài ra còn có một thuộc tính bên trong định nghĩa nội dung là văn bản thuần túy.

Khung [attributeName]="value"hộp, bao quanh thuộc tính xác định ràng buộc đầu vào Angular. Điều đó có nghĩa là, giá trị của thuộc tính (trong trường hợp của bạn là InternalHtml) bị ràng buộc với biểu thức đã cho, khi kết quả biểu thức thay đổi, giá trị thuộc tính cũng thay đổi.

Vì vậy, về cơ bản [innerHtml]cho phép bạn liên kết và thay đổi động con-html của phần tử HTML đã cho.

Trong Angular 2, bạn có thể thực hiện 3 loại ràng buộc:

• [property]="expression"-> Bất kỳ thuộc tính html nào cũng có thể liên kết đến một
  biểu thức. Trong trường hợp này, nếu biểu thức thay đổi thuộc tính sẽ cập nhật, nhưng điều này không hoạt động theo cách khác.
• (event)="expression" -> Khi sự kiện kích hoạt biểu thức thực thi.
• [(ngModel)]="property"-> Liên kết thuộc tính từ js (hoặc ts) sang html. Bất kỳ cập nhật về tài sản này sẽ được chú ý ở khắp mọi nơi.

Một biểu thức có thể là một giá trị, một thuộc tính hoặc một phương thức. Ví dụ: '4', 'control.var', 'getValue ()'

Ví dụ ở đây

Cách để tự động thêm các phần tử vào DOM, như được giải thích trên tài liệu Angular 2, bằng cách sử dụng lớp ViewContainerRef từ @ Angular / core.

Những gì bạn phải làm là khai báo một lệnh sẽ triển khai ViewContainerRef và hoạt động như một trình giữ chỗ trên DOM của bạn.

Chỉ thị

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

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

  constructor(public viewContainerRef: ViewContainerRef) { }

}

Sau đó, trong mẫu mà bạn muốn tiêm thành phần:

HTML

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

Sau đó, từ mã thành phần được chèn, bạn sẽ tiêm thành phần có chứa HTML bạn muốn:

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

}

Tôi đã thêm một ứng dụng demo hoàn toàn hoạt động trên Angular 2 tự động thêm thành phần vào DOM demo

Bạn có thể sử dụng một số phương pháp để đạt được giải pháp. Như đã nói trong câu trả lời đã được phê duyệt, bạn có thể sử dụng:

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

tùy thuộc vào những gì bạn đang cố gắng đạt được, bạn cũng có thể thử những thứ khác như javascript DOM (không được đề xuất, hoạt động DOM chậm):

Trình bày

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

Thành phần

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

Ràng buộc tài sản

Javascript DOM ngoài HTML

Chúng tôi luôn có thể chuyển nội dung html sang thuộc innerHTMLtính để hiển thị nội dung động html nhưng nội dung html động đó cũng có thể bị nhiễm hoặc độc hại. Vì vậy, trước khi chuyển nội dung động cho innerHTMLchúng tôi phải luôn đảm bảo nội dung được vệ sinh (sử dụng DOMSanitizer) để chúng tôi có thể thoát khỏi tất cả nội dung độc hại.

Hãy thử đường ống dưới đây:

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>

Nếu bạn muốn điều đó trong Angular 2 hoặc Angular 4 và cũng muốn giữ CSS nội tuyến thì bạn có thể sử dụng

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

Bạn cũng có thể liên kết các thuộc tính lớp thành phần góc với mẫu bằng cách sử dụng biểu mẫu chính tắc như dưới đây:

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

Tài liệu góc: https://angular.io/guide/template-syntax#property-binding-property

Xem ví dụ stackblitz hoạt động tại đây

Làm việc trong Angular v2.1.1

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

Nếu bạn có các mẫu trong ứng dụng góc (hoặc bất kỳ khung nào) và bạn trả về các mẫu HTML từ phụ trợ của bạn thông qua yêu cầu / phản hồi HTTP, bạn đang trộn lẫn các mẫu giữa giao diện và phụ trợ.

Tại sao không chỉ để lại các công cụ tạo khuôn mẫu trong frontend (tôi sẽ đề nghị điều đó), hoặc trong phần phụ trợ (imo intransparent khá)?

Và nếu bạn giữ các mẫu ở lối vào, tại sao không trả lời bằng JSON cho các yêu cầu đến phần phụ trợ. Bạn thậm chí không phải thực hiện cấu trúc RESTful, nhưng việc giữ các mẫu ở một bên giúp mã của bạn minh bạch hơn.

Điều này sẽ trả lại khi người khác phải đối phó với mã của bạn (hoặc thậm chí chính bạn đang nhập lại mã của chính mình sau một thời gian)!

Nếu bạn làm đúng, bạn sẽ có các thành phần nhỏ với các mẫu nhỏ và tốt nhất, nếu mã của bạn là imba, ai đó không biết ngôn ngữ mã hóa sẽ có thể hiểu mẫu và logic của bạn! Vì vậy, ngoài ra, giữ cho các chức năng / phương pháp của bạn nhỏ như bạn có thể. Cuối cùng, bạn sẽ thấy rằng việc duy trì, tái cấu trúc, đánh giá và thêm các tính năng sẽ dễ dàng hơn nhiều so với các hàm / phương thức / lớp lớn và trộn lẫn giữa tạo khuôn mẫu và logic giữa giao diện và phụ trợ - và giữ nhiều logic trong phần phụ trợ nếu giao diện của bạn cần linh hoạt hơn (ví dụ: viết giao diện Android hoặc chuyển sang khung giao diện khác).

Triết lý, người đàn ông :)

ps: bạn không phải thực hiện mã sạch 100%, vì nó rất tốn kém - đặc biệt là nếu bạn phải thúc đẩy các thành viên trong nhóm;) nhưng: bạn nên tìm sự cân bằng tốt giữa cách tiếp cận mã sạch hơn và những gì bạn có (có thể đã khá sạch sẽ)

kiểm tra cuốn sách nếu bạn có thể và để nó đi vào tâm hồn của bạn: https://de.wikipedia.org/wiki/Clean_Code