Hướng dẫn angular render html from component - góc kết xuất html từ thành phần
Một thay thế Show
Nếu bạn tự động hiển thị một số nội dung HTML trong ứng dụng của mình, bạn có thể đã sử dụng InternalHTML, nhưng điều này có thể được thực hiện một cách an toàn hơn không? Hãy cùng xem ví dụ này.example. Trong ứng dụng này, tôi đã sử dụng thư viện dịch Ngx-dịch. Tôi có một tiêu đề, bộ chọn ngôn ngữ và một liên kết được hiển thị động.ngx-translate. I have a header, language selector, and a dynamically rendered link. Để tái cấu trúc điều này theo cách tiếp cận mà không có bên trong,innerHtml, 1. Cập nhật từng tệp dịch để có SXM_LINK.TEXT ,, Với bên tronginnerHtml: Cập nhật: Ngay sau khi viết bài viết này, tôi đã bắt gặp một bài khác từ Netanal Basal nói về cùng một chủ đề này nhưng sử dụng các yếu tố góc cạnh. Ông là một chuyên gia thành lập về góc cạnh và các khung phía trước khác. Kỹ thuật của anh ấy hoạt động & nbsp; cho & nbsp; Chỉ thị & nbsp; quá; Vì vậy, hãy thử cách tiếp cận của anh ấy đầu tiên - trông thật thú vị!: Shortly after writing this article, I came across another one from Netanal Basal that talks about this same topic but using Angular Elements. He is an established expert on Angular and other front-end frameworks. His technique works for directives too; my solution does not. So, try his approach first — looks
exciting! Giả sử, bạn đã có một bộ các thành phần được xác định trong ứng dụng góc của bạn, Than ôi! Chúng tôi phải chấp nhận thực tế rằng Angular không hỗ trợ các mẫu tự động kết xuất tự động. Ngoài ra, có thể có một số cân nhắc bảo mật quá. Hãy chắc chắn rằng bạn hiểu những yếu tố quan trọng này trước tiên. Nhưng mọi thứ chưa hẳn đã mất! Vì vậy, chúng ta hãy khám phá một cách tiếp cận để đạt được, ít nhất, một tập hợp nhỏ nhưng có ý nghĩa của việc kết xuất mẫu động: HTML động chứa các thành phần góc, như tiêu đề của bài viết này cho thấy.all is not lost! So, let us explore an approach to achieve, at least, one small but significant subset of supporting dynamic template rendering: dynamic HTML containing Angular Components, as the title of this article suggests. Thuật ngữ ghi chú
Điều kiện tiên quyết kiến thứcLà một điều kiện tiên quyết để hiểu đầy đủ giải pháp được đề xuất, tôi khuyên bạn nên có ý tưởng về các chủ đề sau nếu không biết về chúng.
Các thành phần động mẫuHãy để chúng tôi xác định một vài Hãy để chúng tôi xác định một vài
Đầu vào phải được khởi tạo. Mặt khác, TypeScript loại bỏ thuộc tính đó trong quá trình chuyển đổi, gây ra sự cố cho |