Trước tiên, hãy nói về lý do tại sao bạn muốn liên kết HTML trong một thành phần Góc. Bạn có thể có một số HTML do người dùng tạo mà bạn muốn hiển thị trong dom. Bạn thậm chí có thể nhận lại HTML trong phản hồi API. Hoặc bạn có thể có một số HTML cần được hiển thị độ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.
Cứu 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.
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
using the innerHtml attribute:
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ơn
Góc có HTML không?
Angular là một nền tảng và khuôn khổ để xây dựng các ứng dụng khách một trang bằng HTML và TypeScript .
Angular có sử dụng HTML và CSS không?
Các ứng dụng góc cạnh được tạo kiểu bằng CSS tiêu chuẩn . Điều đó có nghĩa là bạn có thể áp dụng mọi thứ bạn biết về biểu định kiểu CSS, bộ chọn, quy tắc và truy vấn phương tiện trực tiếp cho các ứng dụng Angular. Ngoài ra, Angular có thể kết hợp các kiểu thành phần với các thành phần, cho phép thiết kế theo mô-đun hơn so với các biểu định kiểu thông thường.
Góc và HTML có giống nhau không?
AngularJS là một khung giao diện người dùng mã nguồn mở Javascript chủ yếu được sử dụng để phát triển các ứng dụng một trang (SPA). Nó là một khung phát triển và mở rộng liên tục, cung cấp những cách tốt hơn để phát triển các ứng dụng web. Nó thay đổi HTML tĩnh thành HTML động .
Angular có thay thế HTML không?
Angular không tạo HTML và sau đó chuyển nó tới trình duyệt để phân tích cú pháp, thay vào đó Angular đang trực tiếp tạo cấu trúc dữ liệu DOM.