Hướng dẫn angular set innerhtml from typescript - đặt góc bên tronghtml từ bản thảo

Làm thế nào để sử dụng InnerHTML từ mã TypeScript với Angular 2 RC4? Tôi có vấn đề này: Khi người dùng nhấp vào một nút cụ thể, tôi muốn thêm một số mã HTML được biên dịch trước. Ví dụ:

Mã bản thảo

private addHTML() {
    // the html go there I suppose, I don't know how to implement this part
}

Mã HTML

My HTML code

    ADD

Hoặc có thể đây là một cách sai. Hãy cho tôi biết, cảm ơn trước.

Được hỏi ngày 17 tháng 9 năm 2016 lúc 22:38Sep 17, 2016 at 22:38

Daniel Zarioiudaniel ZarioiuDaniel Zarioiu

1151 Huy hiệu vàng4 Huy hiệu bạc9 Huy hiệu đồng1 gold badge4 silver badges9 bronze badges

Một cái gì đó như thế này có thể:

htmlYouWantToAdd;

private addHTML() {
    this.htmlYouWantToAdd = "Some HTML you want to display";
}

Và HTML của bạn:

My HTML code

    ADD

Đã trả lời ngày 17 tháng 9 năm 2016 lúc 23:13Sep 17, 2016 at 23:13

Stefan Svrkotastefan SvrkotaStefan Svrkota

46.8K8 Huy hiệu vàng96 Huy hiệu bạc87 Huy hiệu đồng8 gold badges96 silver badges87 bronze badges

3

Giới thiệu

Angular 2+ hỗ trợ một liên kết thuộc tính [innerHTML] sẽ hiển thị HTML. 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 [innerHTML] 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 innerHTML

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

My HTML code

    ADD

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 [innerHTML] 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

My HTML code

    ADD

My HTML code

    ADD

Điều này sẽ hạn chế các giá trị [innerHTML] của bạn sử dụng các thẻ

My HTML code

    ADD

My HTML code

    ADD

My HTML code

    ADD

Sự kết luận

Trong bài viết này, bạn đã được giới thiệu về ràng buộc tài sản [innerHTML] trong Angular 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.

Làm thế nào sử dụng bên trong với thẻ div?

Có an toàn khi sử dụng InnerHtml trong góc không?

Sự khác biệt giữa nội dung nội suy và bên trong là gì?

Chúng ta có thể sử dụng tài liệu GetEuityByid trong Angular không?