InternalHTML Thuộc tính Ràng buộc trong Angular
Bạn đã bao giờ có các thuộc tính trong thành phần 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 bạn 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 innerHTML có ích.
Bài đăng này bao gồm Angular 2 trở lên
Đưa ra một thuộc tính trong thành phần của ta như thế này:
export class SomeComponent {
htmlStr: string = '<strong>The Tortoise</strong> & the Hare';
}
Ta có thể liên kết với nó và áp dụng đánh dấu với thông tin như thế này trong mẫu của ta :
<div [innerHTML]="htmlStr"></div>
Con rùa và con thỏ
Với phép nội suy thay vì ràng buộc thuộc tính, {{htmlStr}} , bên trong div, thay vào đó ta sẽ nhận được điều này trong dạng xem được kết xuất:
<strong> Rùa </strong> & Hare
👉 Với cả nội suy và ràng buộc thuộc tính, Angular sẽ khử trùng đánh dấu và ngăn chặn bất kỳ thẻ script nào được chèn vào.
Các tin liên quan
