Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

Một thay thế

Nếu bạn tự động hiển thị một số nội dung HTML trong ứng dụng của mình, bạn có thể đã sử dụng InternalHTML, nhưng điều này có thể được thực hiện một cách an toàn hơn không? Hãy cùng xem ví dụ này.example.

Trong ứng dụng này, tôi đã sử dụng thư viện dịch Ngx-dịch. Tôi có một tiêu đề, bộ chọn ngôn ngữ và một liên kết được hiển thị động.ngx-translate. I have a header, language selector, and a dynamically rendered link.

Để tái cấu trúc điều này theo cách tiếp cận mà không có bên trong,innerHtml,

1. Cập nhật từng tệp dịch để có SXM_LINK.TEXT ,,

Với bên tronginnerHtml:

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

Angular 14 cung cấp một liên kết thuộc tính

4 mà bạn có thể sử dụng để hiển thị HTML thay vì sử dụng phép nội suy, như bạn có thể nhận thấy, sẽ hiển thị bất kỳ chuỗi HTML nào dưới dạng văn bản đơn giản.

Trong bài đăng này, bạn sẽ được dạy cách sử dụng

4.

Hãy bắt đầu bằng cách thảo luận về lý do tại sao bạn muốn liên kết HTML trong một thành phần Angular 14. Bạn có thể cần hiển thị một số HTML do người dùng tạo trong DOM. Bạn thậm chí có thể nhận HTML dưới dạng phản hồi từ API. Hoặc bạn có thể có HTML phải được hiển thị động.

Bên trong là gì

Thuộc tính

6 là một thuộc tính phần tử HTML tiêu chuẩn mà góc 14 có thể liên kết với các dấu ngoặc vuông, tức là
7.

Cách sử dụng bên trong với góc 14

Giả sử vì lợi ích của ví dụ này rằng bạn đang xử lý một thành phần có thuộc tính chuỗi chứa một số nội dung HTML:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  htmlContent = '

Hello Angular 14!

'
; constructor() { } }

Nếu chúng ta sử dụng phép nội suy để hiển thị thuộc tính

8 trong mẫu được liên kết như sau:

Chúng tôi sẽ nhận được một cái gì đó như sau:

Hello Angular 14!

Các phần tử HTML không được hiển thị mà chỉ được hiển thị dưới dạng văn bản đơn giản.

Bây giờ, hãy thay đổi điều đó để sử dụng cú pháp sau trong mẫu của chúng tôi:

 [innerHtml]="htmlContent">

Sau khi lưu mẫu, bạn sẽ thấy như sau:

Xin chào Angular 14!

Sự kết luận

Do thực tế là kịch bản chéo trang có thể được giới thiệu khi HTML được hiển thị. HTML đã được hiển thị có thể bao gồm các tập lệnh độc hại gây ra rủi ro bảo mật.

Giới hạn các yếu tố và thuộc tính HTML đối với một tập hợp các phần tử và thuộc tính an toàn được công nhận là một cách để giải quyết XSS.

Đằng sau rèm cửa,

4 sử dụng Domsanitizer của Angular, trong đó kiểm tra các phần tử và thuộc tính HTML so với danh sách các phần tử và thuộc tính được phép.

  • Tác giả: Ahmed Bouchefra theo dõi @ahmedbouchefra
  • Ngày: 21 tháng 4 năm 2022


Nếu bạn có bất kỳ câu hỏi nào về bài viết này, hãy hỏi họ trong các cuộc thảo luận của chúng tôi 👈 cộng đồng. Bạn cũng có thể

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

✋ Bạn muốn làm chủ Angular 14? Đọc hướng dẫn Angular của chúng tôi và tham gia

0 của chúng tôi nơi chúng tôi học cách xây dựng các thành phần, chỉ thị, dịch vụ, đường ống và các ứng dụng web, di động và máy tính để bàn hoàn chỉnh với phiên bản góc mới nhất.

Đảm bảo tham gia cộng đồng Angular 14 Dev của chúng tôi để thảo luận về bất cứ điều gì liên quan đến sự phát triển góc cạnh.

Giống như trang của chúng tôi và đăng ký nguồn cấp dữ liệu của chúng tôi để cập nhật!

Tìm một danh sách biểu tượng cảm xúc để sao chép và dán

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

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

Edric

22.8K12 Huy hiệu vàng78 Huy hiệu bạc89 Huy hiệu đồng12 gold badges78 silver badges89 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ạc182 Huy hiệu đồng23 gold badges116 silver badges182 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

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

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

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

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

586K198 Huy hiệu vàng1958 Huy hiệu bạc1531 Huy hiệu đồng198 gold badges1958 silver badges1531 bronze badges

14

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):

Hello Angular 14!

0

Sau đó, chỉ cần sử dụng hàm

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

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

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

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

17

Trên :

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

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

không hợp lệ

Hello Angular 14!

1

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

Chính xác

Hello Angular 14!

2

-> Đâ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ư:

Hello Angular 14!

3

dấu

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

4 (hoặc được thêm động bằng các phương tiện khác như
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ừ việc 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

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

Jvoigtjvoigtjvoigt

1.7171 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:

Hello Angular 14!

4

Được sử dụng

Hello Angular 14!

5

Đã 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

8 của bạn nằm trong
9
@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, bạn cũng có thể sử dụng:

Hello Angular 14!

6

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

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

Serj Saganserj SaganSerj Sagan

27.6K17 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

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

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

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

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 bạn bằng cách 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
  }
}
2 để đánh dấu nội dung là an toàn với các phương thứ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
  }
}
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à
@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.

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:

Hello Angular 14!

7

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:

Hello Angular 14!

8

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

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

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

Waterpleawaterpleawaterplea

3.2525 huy hiệu vàng28 Huy hiệu bạc46 Huy hiệu đồng5 gold badges28 silver badges46 bronze badges

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

4 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

@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 không hoạt động như mong đợi! Điều này sẽ không nhận các thẻ HTML 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
  }
}
8,
@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, 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
@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,
@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 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:

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

Nếu bạn 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
  }
}
7, bạn sẽ nhận được điều này trong chế độ xem:

 [innerHtml]="htmlContent">
0

Nhưng sử dụng

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
`;
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

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

AlirezaalirezaAlireza

96.6K26 Huy hiệu vàng265 Huy hiệu bạc169 Huy hiệu đồng26 gold badges265 silver badges169 bronze badges

0

 [innerHtml]="htmlContent">
1

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

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
`;
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

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

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

SupriyasupriyaSupriya

4715 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

 [innerHtml]="htmlContent">
2

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

 [innerHtml]="htmlContent">
3

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

 [innerHtml]="htmlContent">
4

Đ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

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

Sahil Ralkarsahil RalkarSahil Ralkar

2.18321 Huy hiệu bạc24 Huy hiệu đồng21 silver badges24 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:

  • class FooComponent {
      bar = 'bar';
      foo = `
    {{bar}}
    `;
    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.
  • class FooComponent {
      bar = 'bar';
      foo = `
    {{bar}}
    `;
    6 -> Khi sự kiện kích hoạt biểu thức thực thi.
  • class FooComponent {
      bar = 'bar';
      foo = `
    {{bar}}
    `;
    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ụ:

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

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

 [innerHtml]="htmlContent">
5

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,4161 Huy hiệu vàng10 Huy hiệu bạc27 Huy hiệu đồng1 gold badge10 silver badges27 bronze badges

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

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
`;
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
class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
`;
9, chúng ta phải luôn đảm bảo nội dung được vệ sinh (sử dụng
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:

 [innerHtml]="htmlContent">
6

Đã 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.6641 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

 [innerHtml]="htmlContent">
8

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

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

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

2

Vào tệp

3

0

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

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

Tharindu Lakshantharindu LakshanTharindu Lakshan

2.6002 huy hiệu vàng19 Huy hiệu bạc42 Huy hiệu đồng2 gold badges19 silver badges42 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

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

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

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

    4
  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

    5

Josef

2.4202 Huy hiệu vàng22 Huy hiệu bạc23 Huy hiệu đồng2 gold badges22 silver badges23 bronze badges

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

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

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ị

6

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

HTML

7

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:

8

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.6862 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

0

Thành phần

1

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

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

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

1.2612 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

2

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

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

Jay Momayajay MomayaJay Momaya

1.68717 Huy hiệu bạc29 Huy hiệu đồng17 silver badges29 bronze badges

3

Làm việc trong Angular v2.1.1

3

Edric

22.8K12 Huy hiệu vàng78 Huy hiệu bạc89 Huy hiệu đồng12 gold badges78 silver badges89 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

4 để 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

1 của Angular cũng giống như
4 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
1 just like
4 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

Hướng dẫn how do i render html in angular 9? - làm cách nào để kết xuất html trong góc 9?

GuntramguntramGuntram

95514 Huy hiệu bạc19 Huy hiệu đồng14 silver badges19 bronze badges

1

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

Để hiển thị một chuỗi HTML trong góc, chúng ta có thể sử dụng thuộc tính bên trong bằng cách liên kết một chuỗi với nó.Thuộc tính InsideHTML vệ sinh HTML, để ứng dụng của bạn an toàn trước các cuộc tấn công kịch bản chéo trang (XSS).use the innerHTML property by binding a string to it. The innerHTML property sanitizes the html, so that your app is safe from the cross-site scripting attacks(XSS).

Chúng ta có thể sử dụng HTML trong góc không?

Với AngularJS, bạn có thể bao gồm HTML từ một tệp bên ngoài.you can include HTML from an external file.

InsideHtml có an toàn ở góc không?

Hãy chắc chắn rằng với tư cách là một nhà phát triển, bạn đang theo dõi cách góc cạnh của người Hồi giáo và các thực tiễn tốt nhất của nó để bảo vệ bạn khỏi XSS.Ví dụ: điều này có nghĩa là bạn không nên sử dụng InternalHTML, không bao giờ sử dụng các mẫu được tạo bằng cách kết hợp đầu vào của người dùng và không bao giờ sử dụng API DOM gốc để tương tác với các phần tử HTML.you shouldn't use innerHTML, never use templates generated by concatenating user input, and never use native DOM APIs to interact with HTML elements.

Ng ràng buộc html là gì?

Chỉ thị ng-bind-hTML là một cách an toàn để liên kết nội dung với phần tử HTML.a secure way of binding content to an HTML element.