Hướng dẫn angular render html in div - góc kết xuất html trong div

Cú pháp chính xác là như sau:

Tài liệu tham khảo tài liệu

Edric

22.6K12 Huy hiệu vàng78 Huy hiệu bạc88 Huy hiệu đồng12 gold badges78 silver badges88 bronze badges

Đã trả lời ngày 22 tháng 12 năm 2015 lúc 21:02Dec 22, 2015 at 21:02

prolink007prolink007prolink007

33.1K23 Huy hiệu vàng116 Huy hiệu bạc181 Huy hiệu Đồng23 gold badges116 silver badges181 bronze badges

17

Góc 2.0.0 và cuối cùng 4.0.0

Cho nội dung an toàn chỉ

Domsanitizer

HTML không an toàn tiềm năng cần được đánh dấu rõ ràng là đáng tin

với một đường ống giố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 vào bằng cách sử dụng cú pháp liên kết

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

Cảnh báo an ninh

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

Gọi bất kỳ API

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
    
    `;

1 nào vô hiệu hóa quá trình vệ sinh tích hợp của Angular cho giá trị được truyền vào. Kiểm tra cẩn thận và kiểm toá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 bất kỳ dữ liệu người dùng nào được thoát ra 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 = `
{{bar}}
    
    `;

with

Sẽ không khiến góc xử lý bất cứ thứ gì đặc trưng cho góc trong

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
    
    `;

2. Angular thay thế đánh dấu cụ thể góc tại thời điểm xây dựng với mã được tạo. Markup được thêm vào trong thời gian chạy sẽ không được xử lý bởi Angular.. Angular replaces Angular specific markup at build time with generated code. Markup added at runtime won't be processed by Angular.

Để thêm HTML chứa đánh dấu đặc trưng của góc (liên kết 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à các thành phần biên dịch khi chạy. Câu trả lời này cung cấp thêm chi tiết Làm thế 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?

Đã trả lời ngày 11 tháng 12 năm 2016 lúc 17:42Dec 11, 2016 at 17:42

Günter Zöchbauergünter ZöchbauerGünter Zöchbauer

583K197 Huy hiệu vàng1953 Huy hiệu bạc1529 Huy hiệu đồng197 gold badges1953 silver badges1529 bronze badges

12

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
    
    `;

3 là lựa 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 dáng được 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:

Sau đó, trong thành phần Angular 2 của bạn, hãy 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 hàm

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
    
    `;

4 để 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 điều đó bằng cách sử dụng JavaScript bản địa, nhưng trong môi trường góc cạnh. Tôi không đề xuất nó, bởi vì làm cho mã 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 dáng bên trong

Đã trả lời ngày 8 tháng 8 năm 2016 lúc 10:10Aug 8, 2016 at 10:10

17

Trên :

Kết nối HTML sẽ không hoạt động khi sử dụng

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
    
    `;

5, thay vào đó sử dụng "biểu thức": thay vào đó:

không hợp lệ

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

Chính xác

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

Bạn có thể thêm các phần tử bổ sung vào biểu thức, như:

0

dấu

HTML được thêm vào bằng cách sử dụng

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
    
    `;

6 (hoặc được thêm động bằng các phương tiện khác như

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
    
    `;

7 hoặc tương tự) sẽ không được xử lý bằng cách Angular theo bất kỳ cách nào ngoại trừ vệ sinh để có 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 cách 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?
Such things work only when the HTML is added statically to a components template. If you need this, you can create a component at runtime like explained in How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

Đã trả lời ngày 13 tháng 12 năm 2015 lúc 23:39Dec 13, 2015 at 23:39

Jvoigtjvoigtjvoigt

1.7071 Huy hiệu vàng16 Huy hiệu bạc20 Huy hiệu Đồng1 gold badge16 silver badges20 bronze badges

1

Sử dụng [InsideHTML] trực tiếp mà không sử dụng chất 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 mình là một cách vệ sinh nội dung. Chỉ thị sau đây là một chỉ thị khác:

1

Được sử dụng

2

Đã trả lời ngày 13 tháng 12 năm 2016 lúc 12:20Dec 13, 2016 at 12:20

2

Chỉ để đưa ra câu trả lời hoàn chỉnh, nếu nội dung

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
    
    `;

8 của bạn nằm trong

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
    
    `;

9

0, bạn cũng có thể sử dụng:

3

Đã trả lời ngày 31 tháng 12 năm 2015 lúc 5:43Dec 31, 2015 at 5:43

Serj Saganserj SaganSerj Sagan

27.5K17 Huy hiệu vàng148 Huy hiệu bạc178 Huy hiệu đồng17 gold badges148 silver badges178 bronze badges

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ĩ rằng tốt hơn là trả về 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, có vẻ như không có ý nghĩa 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à tiêm nó "như" vào DOM.

Tôi biết Angular 1.x có liên kết HTML, nhưng tôi chưa thấy một đối tác trong Angular 2.0. Họ có thể thêm nó sau này mặc dù. Dù sao, tôi vẫn sẽ xem xé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- example

Đã trả lời ngày 21 tháng 7 năm 2015 lúc 22:17Jul 21, 2015 at 22:17

TghtghTGH

38.3K12 Huy hiệu vàng98 Huy hiệu bạc132 Huy hiệu đồng12 gold badges98 silver badges132 bronze badges

3

Câu trả lời ngắn đã được cung cấp ở đây rồi: Sử dụng ràng buộc

1.

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 lầ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ên nó quá nhiệt tình đối với nội dung đáng ngờ để không chấp nhận 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

2 để đánh dấu nội dung là an toàn với các phương thức

3. Cũng có những gợi ý để sử dụng đường ống để làm điều đó và đường ống đó thường được gọi là

4.

Tất cả những điều này là sai lệch 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 người dùng hoặc trên bất cứ điều gì mà bạn không chắc chắn - bạn sẽ mở ra cho một cuộc tấn công mã độc hại.bypasses sanitizing, not sanitizing your content. This could be a security concern because if you ever do this on user provided content or on anything that you are not sure about — you open yourself up for a malicious code attacks.

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

Tôi đã tạo một thư viện trình bao bọc cho nó để 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 để khử trùng HTML:

4

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

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

5

Đó là tiền tố nội bộ - Hense

5, 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 môi trường renedring phía máy chủ và phổ biến góc.

Đã trả lời ngày 21 tháng 11 năm 2019 lúc 9:31Nov 21, 2019 at 9:31

Waterpleawaterpleawaterplea

3.2425 huy hiệu vàng28 Huy hiệu bạc45 Huy hiệu đồng5 gold badges28 silver badges45 bronze badges

Chỉ cần sử dụng thuộc tính

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
    
    `;

6 trong HTML của bạn, một cái gì đó như sau đây:HTML, something like this below:

Đã bao giờ có các thuộc tính trong thành phần của bạ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? Việc 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

7 không hoạt động như mong đợi! Điều này sẽ không nhận các thẻ HTML như

8,

9, v.v. và chỉ truyền nó dưới dạng chuỗi ...Does NOT work as expected! This won't pick up the HTML tags like

8,

9 etc and pass it only as strings...

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

0

Nếu bạn sử dụng

7, bạn sẽ nhận được điều này trong chế độ xem:

7

Nhưng sử dụng

2Makes kết quả như mong đợi như thế này:

Stackoverflow là hữu ích! is helpful!

Đã trả lời ngày 20 tháng 6 năm 2017 lúc 15:21Jun 20, 2017 at 15:21

AlirezaalirezaAlireza

96.2K26 Huy hiệu vàng265 Huy hiệu bạc167 Huy hiệu đồng26 gold badges265 silver badges167 bronze badges

0

8

InsideHTML là một thuộc tính của các yếu tố HTML, cho phép bạn đặt nó theo chương trình HTML. Ngoài ra còn có một thuộc tính bên trong xác định nội dung là văn bản thuần túy.innerHtml is a property of HTML-Elements, which allows you to set it’s html-content programatically. There is also a innerText property which defines the content as plain text.

Khung hộp

3, xung quanh thuộc tính xác định liên kết đầu vào góc. Điều đó có nghĩa là, giá trị của thuộc tính (trong trường hợp của bạn InsideHTML) bị ràng buộc với biểu thức đã cho, khi phần result biểu thức thay đổi, giá trị thuộc tính cũng thay đổi.

Vì vậy, về cơ bản

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
    
    `;

3 cho phép bạn liên kết và tự động thay đổi thành phần HTML của phần tử HTML đã cho.

Đã trả lời ngày 5 tháng 12 năm 2019 lúc 5:35Dec 5, 2019 at 5:35

SupriyasupriyaSupriya

4615 Huy hiệu bạc5 Huy hiệu Đồng5 silver badges5 bronze badges

Bạn có thể áp dụng nhiều đường ống cho Style, Link và HTML như sau trong .html

9

và trong ống .ts cho chất khử trùng 'url'

0

Ống cho chất khử trùng 'HTML'

1

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

Đã trả lời ngày 7 tháng 10 năm 2019 lúc 12:33Oct 7, 2019 at 12:33

Sahil Ralkarsahil RalkarSahil Ralkar

2.18321 Huy hiệu bạc23 Huy hiệu đồng21 silver badges23 bronze badges

Trong Angular 2, bạn có thể thực hiện 3 loại ràng buộc:Angular 2 you can do 3 types of bindings:

• 5 -> Bất kỳ thuộc tính HTML nào cũng có thể liên kết với 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.
  expression. In this case, if expression changes property will update, but this doesn't work the other way.

• 6 -> Khi sự kiện kích hoạt biểu thức thực thi.

• 7 -> Liên kết thuộc tính từ JS (hoặc TS) với HTML. Bất kỳ bản cập nhật nào về tài sản này sẽ được chú ý ở 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', 'bộ điều khiển.var', 'getValue ()'

Ví dụ ở đây

Đã trả lời ngày 17 tháng 2 năm 2017 lúc 11:13Feb 17, 2017 at 11:13

Adrisonsadrisonsadrisons

3.0852 Huy hiệu vàng28 Huy hiệu bạc44 Huy hiệu đồng2 gold badges28 silver badges44 bronze badges

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 liên kết thuộc tính DOM.using DOM property binding.

Ví dụ:

8

Sử dụng hình thức kinh điển như dưới đây:

2

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

Xem ví dụ Stackblitz hoạt động tại đâyexample here

Đã trả lời ngày 13 tháng 4 năm 2020 lúc 17:48Apr 13, 2020 at 17:48

Jasdeep Singhjasdeep SinghJasdeep Singh

7,3861 Huy hiệu vàng9 Huy hiệu bạc26 Huy hiệu đồng1 gold badge9 silver badges26 bronze badges

Chúng ta luôn có thể chuyển nội dung HTML sang thuộc tính

9 để 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 đến

9, chúng ta phải luôn đảm bảo nội dung được vệ sinh (sử dụng

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

1) để chúng ta có thể thoát khỏi tất cả nội dung độc hại.

Thử bên dưới ống:

3

Đã trả lời ngày 4 tháng 3 năm 2019 lúc 9:58Mar 4, 2019 at 9:58

Suneet Bansalsuneet BansalSuneet Bansal

2.6541 Huy hiệu vàng13 Huy hiệu bạc18 Huy hiệu đồng1 gold badge13 silver badges18 bronze badges

0

Bạn có thể sử dụng hai cách sau.

hoặc

5

Đã trả lời ngày 21 tháng 11 năm 2020 lúc 4:04Nov 21, 2020 at 4:04

Angular 2+ hỗ trợ một liên kết thuộc tính [bên trong]] sẽ khiến HTML hiển thị. Nếu bạn sử dụng phép nội suy, nó sẽ được coi là một chuỗi.

Vào tệp

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

2

Vào tệp

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

3

7

Đã trả lời ngày 1 tháng 5 năm 2021 lúc 5:16May 1, 2021 at 5:16

Tharindu Lakshantharindu LakshanTharindu Lakshan

2.5122 Huy hiệu vàng18 Huy hiệu bạc41 Huy hiệu đồng2 gold badges18 silver badges41 bronze badges

Tôi đã xây dựng thư viện dưới đây sẽ giúp điều chỉnh lại các ràng buộc được định dạng HTML. Vui lòng tìm các bước dưới đây để sử dụng thư viện này. Thư viện này về cơ bản cho phép bơm mã biên dịch JIT vào AOT

1. Cài đặt thư viện bằng cách sử dụng

   8

2. Thêm mã bên dưới trong tệp app.component.html

   9

3. Sử dụng mã bên dưới trong tệp app.component.ts

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

   0

4. Thêm mô -đun vào tệp app.module.ts

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

   1

5. Thư viện này hỗ trợ HTML cơ bản, vật liệu góc, bố trí flex. Để sử dụng các tính năng này, cài đặt bên dưới phụ thuộc

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

   2

Josef

2.3902 Huy hiệu vàng21 Huy hiệu bạc22 Huy hiệu đồng2 gold badges21 silver badges22 bronze badges

Đã trả lời ngày 14 tháng 7 năm 2021 lúc 6:35Jul 14, 2021 at 6:35

Cách để thêm các phần tử vào DOM, như được giải thích trên Angular 2 Doc, là bằng cách sử dụng lớp ViewContainerref từ @angular/Core.

Những gì bạn phải làm là tuyên bố một chỉ thị sẽ triển khai ViewContainerRef và hành động như một trình giữ chỗ trên DOM của bạn.

Chỉ thị

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

3

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

HTML

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

4

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

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

5

Tôi đã thêm một ứng dụng demo hoạt động đầy đủ trên angular 2 tự động thêm thành phần vào Dom Demo

Đã trả lời ngày 26 tháng 6 năm 2017 lúc 20:13Jun 26, 2017 at 20:13

BogdancbogdancBogdanC

2.6562 Huy hiệu vàng23 Huy hiệu bạc22 Huy hiệu Đồng2 gold badges23 silver badges22 bronze badges

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:

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 khuyến nghị, các hoạt động DOM chậm):

Bài thuyết trì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
  }
}

7

Thành phần

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

8

Tài sản ràng buộc

JavaScript Dom Outer HTML

Đã trả lời ngày 26 tháng 2 năm 2019 lúc 11:47Feb 26, 2019 at 11:47

João Beirãojoão BeirãoJoão Beirão

1.2512 huy hiệu vàng8 Huy hiệu bạc12 Huy hiệu đồng2 gold badges8 silver badges12 bronze badges

2

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

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

9

Đã trả lời ngày 25 tháng 5 năm 2019 lúc 9:23May 25, 2019 at 9:23

Jay Momayajay MomayaJay Momaya

1.66716 huy hiệu bạc28 Huy hiệu đồng16 silver badges28 bronze badges

3

Làm việc trong Angular v2.1.1

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
    
    `;

0

Edric

22.6K12 Huy hiệu vàng78 Huy hiệu bạc88 Huy hiệu đồng12 gold badges78 silver badges88 bronze badges

Đã trả lời ngày 23 tháng 11 năm 2016 lúc 7:05Nov 23, 2016 at 7:05

FacodefacodeFACode

9231 Huy hiệu vàng10 Huy hiệu bạc19 Huy hiệu đồng1 gold badge10 silver badges19 bronze badges

1

Chỉ để đăng một chút bổ sung cho tất cả các câu trả lời tuyệt vời cho đến nay: nếu bạn đang sử dụng

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
    
    `;

6 để hiển thị các thành phần góc và bị đánh bại về việc nó không hoạt động như tôi, hãy xem thư viện NGX-Dynamic-hooks mà tôi đã viết để giải quyết vấn đề này Rất vấn đề.

Với nó, bạn có thể tải các thành phần từ chuỗi động/HTML mà không ảnh hưởng đến bảo mật. Nó thực sự sử dụng

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

1 của Angular cũng giống như

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
    
    `;

6 cũng vậy, nhưng vẫn giữ được khả năng tải các thành phần (một cách an toàn).without compromising security. It actually uses Angular's

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

1 just like

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
    
    `;

6 does as well, but retains the ability to load components (in a safe manner).

Xem nó trong hành động trong Stackblitz này.

Đã trả lời ngày 26 tháng 8 năm 2020 lúc 17:19Aug 26, 2020 at 17:19

MvinmvinMvin

3754 Huy hiệu bạc11 Huy hiệu đồng4 silver badges11 bronze badges

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

Tại sao không để lại những thứ tạo khuôn ở phía trước (tôi sẽ đề xuất điều đó), hoặc trong phần phụ trợ (IMO khá nội tâm)?

Và nếu bạn giữ các mẫu ở phía trước, tại sao không trả lời với JSON cho các yêu cầu cho phần phụ trợ. Bạn thậm chí không phải thực hiện một cấu trúc yên tĩnh, nhưng việc giữ các mẫu ở một bên làm cho 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 riêng bạn 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, một người không biết ngôn ngữ mã hóa sẽ có thể hiểu được mẫu và logic của bạn! Vì vậy, ngoài ra, hãy giữ 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ẽ phát hiện ra rằng việc duy trì, tái cấu trúc, xem xét và thêm các tính năng sẽ dễ dàng hơn nhiều so với các chức năng/phương pháp/lớp lớn và trộn lẫn khuôn mẫu và logic giữa phía trước và phụ trợ - và giữ càng nhiều logic trong phần phụ trợ Nếu phía trước của bạn cần linh hoạt hơn (ví dụ: viết một frontend Android hoặc chuyển sang một khung phía trước khác).

Triết học, người đàn ông :)

P.S .: Bạn không phải thực hiện mã sạch 100%, bởi vì nó rất tốn kém - đặc biệt 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 thấy sự cân bằng tốt giữa một cách tiếp cận với 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ó vào tâm hồn của bạn: https://de.wikipedia.org/wiki/Clean_Code

Đã trả lời ngày 30 tháng 8 năm 2017 lúc 23:25Aug 30, 2017 at 23:25

GuntramguntramGuntram

95513 Huy hiệu bạc18 Huy hiệu đồng13 silver badges18 bronze badges

1

HTML kết xuất góc như thế nào?

Làm cách nào để hiển thị HTML bên trong một liên kết góc?