Hướng dẫn what is innerhtml in angular - Internalhtml trong góc là gì

Giới thiệu

Angular 2+ hỗ trợ một liên kết thuộc tính

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

Trong bài viết này, bạn sẽ được trình bày cách sử dụng

4 và một số cân nhắc cho việc sử dụng.

Điều kiện tiên quyết

Nếu bạn muốn theo dõi cùng với bài viết này, bạn sẽ cần:

  • Một số quen thuộc với nội suy góc và liên kết tài sản cũng có thể hữu ích.

Bước 1 - Sử dụng
6

Với mục đích của bài viết này, giả sử bạn đang làm việc với một thành phần có chứa

7 bao gồm hỗn hợp các thực thể và yếu tố HTML và các yếu tố HTML:

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example & Bold Text Example';
}

Hãy cùng xem xét một mẫu sử dụng phép nội suy trên chuỗi này:

<div>{{ htmlStr }}div>

Sau khi biên dịch, mã này sẽ tạo ra kết quả:

Ví dụ văn bản đơn giản & amp; Ví dụ văn bản táo bạo

Các thực thể HTML và các yếu tố HTML không được hiển thị.

Bây giờ, hãy để xem xét một mẫu sử dụng thuộc tính

4 ràng buộc trên chuỗi này:

<div [innerHTML]="htmlStr">div>

Sau khi biên dịch lại, mã này sẽ tạo ra kết quả:

Ví dụ văn bản đơn giản & ví dụ văn bản táo bạoBold Text Example

Quan sát rằng các thực thể HTML và các yếu tố HTML được hiển thị.

Bước 2 - Hiểu những hạn chế

Kết xuất HTML thường có khả năng giới thiệu kịch bản trang web chéo (XSS). HTML được kết xuất có thể chứa các tập lệnh độc hại trình bày một vấn đề bảo mật.

Một phương pháp giải quyết XSS là bằng cách hạn chế các loại phần tử và thuộc tính HTML cho một tập hợp các phần tử và thuộc tính an toàn đã biết.

Đằng sau.

Lưu ý: Danh sách đầy đủ các phần tử và thuộc tính HTML được phê duyệt có thể được quan sát trong

1. The full list of approved HTML elements and attributes can be observed in
1.

Điều này sẽ hạn chế các giá trị

4 của bạn sử dụng các thẻ
3 và
4 và các thuộc tính
5. Hãy ghi nhớ giới hạn này khi chọn sử dụng
4.

Sự kết luận

Trong bài viết này, bạn đã được giới thiệu về liên kết tài sản

4 trong góc 2+. Nó sẽ dẫn đến việc hiển thị đánh dấu HTML có trong một chuỗi.

Nếu bạn muốn tìm hiểu thêm về Angular, hãy xem trang chủ đề Angular của chúng tôi cho các bài tập và các dự án lập trình.

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

Hướng dẫn what is innerhtml in angular - Internalhtml trong góc là gì

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

8 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

9. 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 what is innerhtml in angular - Internalhtml trong góc là gì

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

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

<div>{{ htmlStr }}div>
0

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

@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 để 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 what is innerhtml in angular - Internalhtml trong góc là gì

Đã 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 what is innerhtml in angular - Internalhtml trong góc là gì

17

Trên :

Kết nối HTML sẽ không hoạt động khi 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, thay vào đó sử dụng "biểu thức": thay vào đó:

không hợp lệ

<div>{{ htmlStr }}div>
1

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

Chính xác

<div>{{ htmlStr }}div>
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ư:

<div>{{ htmlStr }}div>
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ư
@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 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

Hướng dẫn what is innerhtml in angular - Internalhtml trong góc là gì

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:

<div>{{ htmlStr }}div>
4

Được sử dụng

<div>{{ htmlStr }}div>
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

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

<div>{{ htmlStr }}div>
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 what is innerhtml in angular - Internalhtml trong góc là gì

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 what is innerhtml in angular - Internalhtml trong góc là gì

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
  }
}
8.

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

0 để đánh dấu nội dung là an toàn với các phương thức
class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
`;
0. 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à
class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
`;
1.

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:

<div>{{ htmlStr }}div>
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:

<div>{{ htmlStr }}div>
8

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

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
`;
2, 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 what is innerhtml in angular - Internalhtml trong góc là gì

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

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
`;
4 không hoạt động như mong đợi! Điều này sẽ không nhận các thẻ HTML như
class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
`;
5,
class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
`;
6, 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
class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
`;
5,
class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
`;
6 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}}
`;
7

Nếu bạn sử dụng

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
`;
4, bạn sẽ nhận được điều này trong chế độ xem:

<div [innerHTML]="htmlStr">div>
0

Nhưng sử dụng

class FooComponent {
  bar = 'bar';
  foo = `
{{bar}}
`;
9Makes 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 what is innerhtml in angular - Internalhtml trong góc là gì

AlirezaalirezaAlireza

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

0

<div [innerHTML]="htmlStr">div>
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

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

@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 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 what is innerhtml in angular - Internalhtml trong góc là gì

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

<div [innerHTML]="htmlStr">div>
2

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

<div [innerHTML]="htmlStr">div>
3

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

<div [innerHTML]="htmlStr">div>
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 what is innerhtml in angular - Internalhtml trong góc là gì

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:

  • 2 -> 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.
  • 3 -> Khi sự kiện kích hoạt biểu thức thực thi.
  • 4 -> 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ụ:

5

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

<div [innerHTML]="htmlStr">div>
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,4061 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

6 để 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
6, chúng ta phải luôn đảm bảo nội dung được vệ sinh (sử dụng
8) để chúng ta có thể thoát khỏi tất cả nội dung độc hại.

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

<div [innerHTML]="htmlStr">div>
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

<div [innerHTML]="htmlStr">div>
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 what is innerhtml in angular - Internalhtml trong góc là gì

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

9

Vào tệp

0

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 what is innerhtml in angular - Internalhtml trong góc là gì

Tharindu Lakshantharindu LakshanTharindu Lakshan

2.5922 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 what is innerhtml in angular - Internalhtml trong góc là gì

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.6762 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 what is innerhtml in angular - Internalhtml trong góc là gì

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 what is innerhtml in angular - Internalhtml trong góc là gì

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

8 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
8 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 what is innerhtml in angular - Internalhtml trong góc là gì

GuntramguntramGuntram

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

1

Bên trong là gì?

Thuộc tính phần tử InternalHTML được hoặc đặt đánh dấu HTML hoặc XML có trong phần tử. Để chèn HTML vào tài liệu thay vì thay thế nội dung của một phần tử, hãy sử dụng phương thức insertAdjacenthtml ().gets or sets the HTML or XML markup contained within the element. To insert the HTML into the document rather than replace the contents of an element, use the method insertAdjacentHTML() .

Việc sử dụng bên trong trong góc là gì?

Angular 14 cung cấp một liên kết thuộc tính [InsideHTML] 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.render HTML instead of using interpolation, which will, as you might have noticed, render any HTML string as a plain text.

Có tốt không khi sử dụng InnerHtml trong góc?

Angular đi kèm với một chất khử trùng HTML Domsanitizer tích hợp, như một tính năng bảo mật, được sử dụng bất cứ khi nào bạn sử dụng [InsideHTML].Đây là một tính năng tuyệt vời - nhưng có một lỗi/tính năng khá khó chịu ở chỗ nếu bạn có các yếu tố có kiểu nội tuyến, các kiểu sẽ bị xóa khỏi trang của bạn.Its a great feature - but has a pretty annoying bug/feature in that if you have elements with inline styles, the styles wind up getting removed from your page.

Tại sao chúng ta đang sử dụng InternalHTML?

Thuộc tính bên trong có thể được sử dụng để viết HTML động trên tài liệu HTML.Nó được sử dụng chủ yếu trong các trang web để tạo HTML động như mẫu đăng ký, mẫu bình luận, liên kết, v.v.to write the dynamic html on the html document. It is used mostly in the web pages to generate the dynamic html such as registration form, comment form, links etc.