Vì vậy, làm thế nào nó hoạt động?
innerHtml là thuộc tính phần tử HTML đã tồn tại mà Angular có thể liên kết bằng cách sử dụng dấu ngoặc vuông [ [ & ] ]. For example, in your template you may have something like this:
Đây có phải là điều tôi nên làm không?
Co le không. Đối với HTML do người dùng tạo hoặc HTML đến từ phản hồi API, có thể không có tùy chọn nào khác. Đối với HTML được kết xuất động, có thể có một tùy chọn thân thiện với Góc khác
Việc cho phép người dùng hoặc API bên ngoài ra lệnh cho HTML được hiển thị trong ứng dụng của bạn có thể gây ra một số do dự. Tuy nhiên, Angular cung cấp một số bảo mật bổ sung xung quanh nội dung HTML ràng buộc bằng cách vệ sinh HTML trước khi hiển thị nó. Nếu giá trị HTML chứa thẻ , thì Angular theo mặc định sẽ không hiển thị dưới dạng HTML.
Đây có phải là điều tôi nên làm không?
Co le không. Đối với HTML do người dùng tạo hoặc HTML đến từ phản hồi API, có thể không có tùy chọn nào khác. Đối với HTML được kết xuất động, có thể có một tùy chọn thân thiện với Góc khác
Việc cho phép người dùng hoặc API bên ngoài ra lệnh cho HTML được hiển thị trong ứng dụng của bạn có thể gây ra một số do dự. Tuy nhiên, Angular cung cấp một số bảo mật bổ sung xung quanh nội dung HTML ràng buộc bằng cách vệ sinh HTML trước khi hiển thị nó. Nếu giá trị HTML chứa thẻ , thì Angular theo mặc định sẽ không hiển thị dưới dạng HTML.
Hãy xem ví dụ hoạt động này được lấy từ Tài liệu góc
Nếu bạn cố gắng hiển thị thẻ thông qua phép nội suy [{{ & }} . Nếu bạn cố gắng kết xuất nó bằng cách sử dụng liên kết thuộc tính, Angular sẽ bỏ qua giá trị trong mẫu và ghi lại cảnh báo này trong bảng điều khiển. ], Angular will render the value as text. If you attempt to render it using property binding, Angular ignores the value in the template and logs this warning in the console:
"CẢNH BÁO. khử trùng HTML đã loại bỏ một số nội dung [xem ]. ”
Angular đang sử dụng một lớp có tên là DomSanitizer để xử lý tất cả những điều này nhưng nó có một số nhược điểm. Đối với trường hợp sử dụng tiềm năng của chúng tôi về hiển thị HTML do người dùng tạo, nếu người dùng đã thêm thẻ hoặc kiểu nội tuyến trên các phần tử của họ, thì nó sẽ không có . StackBlitz example.
Giúp đỡ
Một cách để vượt qua thử thách này là tự tạo ống vệ sinh. . . . . . . . . .
Bằng cách sử dụng phương thức DomSanitizer của bypassSecurityTrustHtml, . bỏ qua bảo mật/vệ sinh mặc định của Angular và tin tưởng vào giá trị HTML đã nhập. Trong mẫu, thêm đường ống của bạn.
Và phong cách của bạn sẽ có hiệu lực. Xem toàn bộ ví dụ tại đây.
một sự thay thế
Trong ứng dụng này, tôi đang sử dụng thư viện dịch ngx-dịch . Tôi có tiêu đề, bộ chọn ngôn ngữ và liên kết được hiển thị động.
Để tái cấu trúc điều này theo cách tiếp cận mà không cần innerHtml ,
1. Cập nhật từng tệp dịch để có “SXM_LINK. VĂN BẢN”, “SXM_LINK. LANG” và “SXM_LINK. URL” thay vì “SXM_LINK”
Với innerHtml.
Không có
2. Cập nhật mẫu thành phần để sử dụng thẻ với các khóa dịch đó thay cho Với innerHtml. Không có Thoạt nhìn, cách tiếp cận “Không có” có vẻ phức tạp hơn, có nhiều dòng mã hơn, nhưng tôi thích cách tiếp cận mô tả hơn này hơn là. ẩn mọi thứ trong một tệp dịch. Việc tìm các thuộc tính cụ thể và cập nhật bản sao trong tương lai cũng sẽ dễ dàng hơnLàm cách nào để thêm tệp HTML bên ngoài vào Angular?
Làm cách nào để tích hợp HTML với Angular?
Làm cách nào để thêm mẫu HTML trong Angular 8?
Làm cách nào để nhập tệp HTML trong thành phần Góc?
Chủ Đề