Hướng dẫn angular render html dynamically - góc kết xuất html động

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!: 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ới thiệu

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, .... Sẽ không tuyệt vời nếu bạn có thể tạo các mẫu độc lập bao gồm và các cú pháp Angular khác (đầu vào, đầu ra, nội suy, chỉ thị, v.v.) Tất cả - tất cả được tạo ra và tất cả các cú pháp góc được đánh giá? Sẽ là hoàn hảo !?

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.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ú

1. Điều kiện tiên quyết kiến ​​thứcdynamic HTML” or “dynamic template” or “dynamic template HTML” are used quite frequently in this article. They all mean the same: the description of “standalone templates” in the introduction above.
2. Các thành phần động mẫudynamic components” means all put/used in a dynamic HTML; please do not confuse it for “components defined or compiled dynamically at run-time” — we won’t be doing that in this article.
3. Đầ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 6 (xem sau trong giải pháp)-nó không thể tìm thấy thuộc tính đầu vào của thành phần đó vào thời gian chạy, do đó sẽ không đặt thuộc tính đó ngay cả khi HTML động có HTML thích hợp Thuộc tính phần tử được xác định.Host Component”. For a component or projected component in a dynamic HTML, its Host Component is the component that created it, e.g. in “Sample dynamic HTML” gist below, the Host Component of [yourComponent6] is the component that will create that dynamic HTML, not inside which [yourComponent6] is placed in the dynamic HTML.

Điều kiện tiên quyết kiến ​​thức

Là 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.

1. Trình tải thành phần động bằng cách sử dụng thành phầnFactoryResolver.
2. Trình chiếu nội dung trong Angular - Chọn bài viết yêu thích của bạn từ Google.

Các thành phần động mẫu

Hãy để chúng tôi xác định một vài mà chúng tôi sẽ sử dụng trong mẫu mẫu động của chúng tôi HTML, trong phần tiếp theo.

Hãy để chúng tôi xác định một vài mà chúng tôi sẽ sử dụng trong mẫu mẫu động của chúng tôi HTML, trong phần tiếp theo.This translates to the first restriction of my proposed solution: an 2 property must be initialized to a 3 value. There are two parts here.

1. Hãy để chúng tôi xác định một vài mà chúng tôi sẽ sử dụng trong mẫu mẫu động của chúng tôi HTML, trong phần tiếp theo.This translates to the first restriction of my proposed solution: an 2 property must be initialized to a 3 value. There are two parts here.3 type. I impose this restriction because the value of any attribute of an HTML Element in a dynamic HTML is going to be of 5 type. So, better to keep your components’ inputs’ data types consistent with that of the value you will be setting on them.
2. Hãy xem nhanh 5, các ý kiến ​​chống lại 6, 0 và 1. Điều này chuyển sang hạn chế đầu tiên của giải pháp đề xuất của tôi: thuộc tính 2 phải được khởi tạo thành giá trị 3. Có hai phần ở đây.3 type. I impose this restriction because the value of any attribute of an HTML Element in a dynamic HTML is going to be of 5 type. So, better to keep your components’ inputs’ data types consistent with that of the value you will be setting on them.. Otherwise Typescript removes that property during transpilation, which causes problems for 6 (see later in the solution) — it cannot find the input property of that component at run-time, hence won’t set that property even if dynamic HTML has the appropriate HTML Element attribute defined.

Đầu vào phải là loại 3. Tôi áp đặt hạn chế này vì giá trị của bất kỳ thuộc tính nào của phần tử HTML trong HTML động sẽ thuộc loại 5. Vì vậy, tốt hơn để giữ cho các thành phần của bạn, các loại dữ liệu đầu vào của bạn phù hợp với giá trị bạn sẽ đặt trên chúng.. Otherwise Typescript removes that property during transpilation, which causes problems for 6 (see later in the solution) — it cannot find the input property of that component at run-time, hence won’t set that property even if dynamic HTML has the appropriate HTML Element attribute defined.

Đầ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 6 (xem sau trong giải pháp)-nó không thể tìm thấy thuộc tính đầu vào của thành phần đó vào thời gian chạy, do đó sẽ không đặt thuộc tính đó ngay cả khi HTML động có HTML thích hợp Thuộc tính phần tử được xác định.

Đầ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 6 (xem sau trong giải pháp)-nó không thể tìm thấy thuộc tính đầu vào của thành phần đó vào thời gian chạy, do đó sẽ không đặt thuộc tính đó ngay cả khi HTML động có HTML thích hợp Thuộc tính phần tử được xác định.the second restriction of my proposed solution: no support for Directives, Pipes, interpolation, two-way data-binding, [variable] data-binding, ng-template, ng-container, etc. in a dynamic template HTML.

Mẫu HTML độngthe second restriction of my proposed solution: no support for Directives, Pipes, interpolation, two-way data-binding, [variable] data-binding, ng-template, ng-container, etc. in a dynamic template HTML.only hard-coded string values are supported, i.e. no variables like 8. This is because, to support such object binding, we would need to parse the HTML attributes and evaluate their values at run-time. Easier said than done!

Chúng ta cũng định nghĩa một HTML động. Tất cả các cú pháp được đề cập ở đây sẽ hoạt động. Bất kỳ cú pháp Angular nào không được bảo hiểm ở đây sẽ không được hỗ trợ.only hard-coded string values are supported, i.e. no variables like 8. This is because, to support such object binding, we would need to parse the HTML attributes and evaluate their values at run-time. Easier said than done!

1. Hãy để tôi làm rõ một lần nữa hạn chế thứ hai của giải pháp đề xuất của tôi: không hỗ trợ cho chỉ thị, đường ống, nội suy, liên kết dữ liệu hai chiều, [biến] liên kết dữ liệu, NG------TEMPLATE, NG-Container, v.v. ..
   If you really do want to use an attribute directive, the best alternative here is to create a 9 instead. In other words, you can create your component with any Angular-supported selector — 0 selector, 1 selector, 2 selector or even a combination of them, e.g. 3.
2. Để làm rõ thêm về hạn chế chuỗi ____ ____17, chỉ có các giá trị chuỗi được mã hóa cứng được hỗ trợ, tức là không có biến nào như 8. Điều này là do, để hỗ trợ liên kết đối tượng đó, chúng ta sẽ cần phân tích các thuộc tính HTML và đánh giá các giá trị của chúng tại thời gian chạy. Nói dễ hơn làm!.If you really do want to use an attribute directive, the best alternative here is to create a 9 instead. In other words, you can create your component with any Angular-supported selector — 0 selector, 1 selector, 2 selector or even a combination of them, e.g. 3..
   Once you attach your dynamic HTML into DOM, you can easily search for that attribute using 4 or 5 and set its value before you create the components. Alternatively, you could manipulate the HTML string itself before attaching it to the DOM. (This will become clearer in the next section.)

Đính kèm mẫu động HTML vào DOM

Bây giờ là lúc để làm cho HTML động có sẵn trong DOM. Có nhiều cách để đạt được điều này: Sử dụng Chỉ thị thuộc tính 6, 7, 8, v.v. bên dưới Snippet cung cấp một vài ví dụ đăng ký vào 9 đại diện cho luồng HTML mẫu và gắn nó vào độ phân giải.

Các thành phần động tạo ra nhà máy

Chúng ta cần đạt được điều gì ở đây?

1. Tìm các thành phần Các phần tử HTML trong DOM (của HTML động).
2. Tạo các thành phần góc thích hợp và đặt thuộc tính 7 của chúng.
3. Dây chúng vào ứng dụng góc.

Đó chính xác là những gì 1 làm dưới đây.

Tôi hy vọng rằng mã và nhận xét là tự giải thích. Vì vậy, hãy để tôi chỉ bao gồm một số phần nhất định yêu cầu giải thích bổ sung.

1. 2: Đây là trung tâm của giải pháp này - API được cung cấp bởi Angular để tạo ra một thành phần theo mã.the heart of this solution — the API provided by Angular to create a component by code.the heart of this solution — the API provided by Angular to create a component by code.
2. Đối số đầu tiên 3 được Angular yêu cầu để đưa các phụ thuộc vào các trường hợp được tạo ra.
3. Đối số thứ hai 4 là một mảng của tất cả các nút có thể dự đoán được của thành phần sẽ được tạo, ví dụ: Trong mẫu HTML của HTML, 5 và 6 là các nút có thể dự kiến ​​của . Nếu đối số này không được cung cấp, thì các nút này bên trong sẽ không được hiển thị trong chế độ xem cuối cùng.
4. 6: Hàm này lặp qua tất cả các thuộc tính công khai của thể hiện thành phần được tạo và đặt các giá trị của chúng thành các thuộc tính tương ứng Các giá trị của phần tử máy chủ [yourComponent6]0, nhưng chỉ khi tìm thấy, nếu không thì đầu vào giữ giá trị mặc định của nó & nbsp;only if found, otherwise the input holds its default value defined in the component. only if found, otherwise the input holds its default value defined in the component.
5. [yourComponent6]1: Điều này làm cho góc nhận thức về các thành phần được tạo ra và bao gồm chúng trong chu kỳ phát hiện thay đổi của nó.change detection cycle.change detection cycle.
6. [yourComponent6]2: Angular sẽ không tự động xử lý bất kỳ thành phần nào được tạo động cho chúng tôi. Do đó, chúng ta cần phải làm điều đó một cách rõ ràng khi thành phần máy chủ đang bị phá hủy. Trong ví dụ hiện tại của chúng tôi, thành phần máy chủ của chúng tôi sẽ được giải thích trong phần tiếp theo.
7. Lưu ý rằng [yourComponent6]4 chỉ hoạt động cho một loại thành phần [yourComponent6]5 cho mỗi trường hợp của lớp nhà máy đó. Vì vậy, để liên kết nhiều loại thành phần, bạn phải tạo nhiều phiên bản nhà máy như vậy cho mỗi loại thành phần. Để làm cho quá trình này dễ dàng hơn, chúng tôi sử dụng lớp [yourComponent6]6. . (Phải có những cách tốt hơn để quản lý quy trình tạo nhà máy. Mở để đề xuất.)

Bây giờ chúng tôi đã sẵn sàng để sử dụng lớp nhà máy này để tạo ra các thành phần động.

Tạo các thành phần góc trong HTML động

Cuối cùng, chúng tôi tạo các phiên bản [yourComponent6]4 trên mỗi loại thành phần động của loại sử dụng [yourComponent6]6 và gọi các phương thức 1 của chúng trong vòng lặp, trong đó 2 là nút HTML chứa HTML động. Chúng tôi cũng có thể thực hiện các hoạt động khởi tạo tùy chỉnh trên mạng trên các thành phần mới được tạo. Xem dòng 55 bóng65.

Nhà cung cấp DynamicComponentFactoryFactory (Quan trọng!)

Lưu ý trong [yourComponent6]3 rằng [yourComponent6]6 đã được cung cấp trong bộ trang trí 5 của riêng mình và được tiêm bằng 6. Như đã đề cập trong các nhận xét JSDOC của nó, điều này rất quan trọng vì chúng tôi muốn đúng ví dụ của 7 được sử dụng để tạo các thành phần một cách linh hoạt. Nếu lớp nhà máy không được cung cấp ở cấp thành phần máy chủ và thay vào đó là 8 hoặc một số 9, thì ví dụ 7 sẽ ở cấp độ đó, có thể có hậu quả không lường trước được, ví dụ: Liên kết tương đối trong [yourComponent6]1 được sử dụng trong, giả sử, [yourComponent6]2 có thể không hoạt động chính xác.

Đó là nó!

Sự kết luận

Nếu bạn đã làm cho nó đến nay, bạn có thể nghĩ, thì Meh! Đây là một phiên bản hoàn toàn bị loại bỏ của các mẫu góc cạnh. Điều đó không tốt cho tôi! Vâng, tôi sẽ không phủ nhận điều đó. Nhưng, tin tôi đi, nó vẫn là một người có sức mạnh của người Viking! Tôi đã có thể tạo một trang web chính thức, hiển thị các mẫu động, do người dùng xác định bằng cách sử dụng phương pháp này và nó hoạt động hoàn toàn tốt.

Mặc dù chúng tôi không thể hiển thị các mẫu động được tải đầy đủ vào thời điểm chạy, chúng tôi đã thấy trong bài viết này làm thế nào chúng tôi có thể hiển thị ít nhất các thành phần của các thành phần với các đầu vào chuỗi tĩnh. Điều này có vẻ giống như một giải pháp bị tê liệt, đó là khi so sánh với tất cả các tính năng tuyệt vời mà Angular cung cấp vào thời gian biên dịch. Nhưng, thực tế, điều này vẫn có thể giải quyết rất nhiều trường hợp sử dụng yêu cầu kết xuất mẫu động.

Hãy để xem xét đây là một thành công một phần.

Hy vọng bạn tìm thấy bài viết hữu ích.

Tín dụng đi đến bình luận GitHub này hoạt động như là cơ sở của giải pháp này. Ngoài ra, tôi đọc trong đó, một vài bình luận sau đó, rằng kỹ thuật này cũng được sử dụng bởi trang web tài liệu Angular.io. Điều đó thực sự đã thúc đẩy sự tự tin của tôi W.R.T. Tính xác thực của kỹ thuật này.