Làm thế nào để hiển thị góc cạnh html

CẬP NHẬT. Ngay sau khi viết bài viết này, tôi đã xem một bài viết khác từ Netanal Basal nói về chủ đề tương tự nhưng sử dụng Các yếu tố góc. Anh ấy là một chuyên gia lâu đời về Angular và các framework front-end khác. Kỹ thuật của anh ấy cũng hiệu quả đối với các chỉ thị; . Vì vậy, hãy thử cách tiếp cận của anh ấy trước — có vẻ thú vị

Giới thiệu

Giả sử, bạn có một tập hợp các thành phần được xác định trong ứng dụng Angular của mình, .... Sẽ không tuyệt sao nếu bạn có thể tạo các mẫu độc lập bao gồm và các “Cú pháp góc” khác (Đầu vào, Đầu ra, Nội suy, Chỉ thị, v.v. ), tải chúng trong thời gian chạy từ back-end và Angular sẽ hiển thị tất cả chúng — tất cả được tạo và tất cả các cú pháp Angular được đánh giá? . ?

Bạn không thể có mọi thứ, nhưng ít nhất một cái gì đó sẽ hoạt động

than ôi. chúng ta phải chấp nhận thực tế là Angular không hỗ trợ kết xuất các mẫu một cách linh hoạt. Ngoài ra, có thể có một số cân nhắc về bảo mật. Hãy chắc chắn rằng bạn hiểu những yếu tố quan trọng này đầu 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 con nhỏ nhưng quan trọng của việc hỗ trợ hiển thị 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 gợi ý

Ghi chú thuật ngữ

1. Các thuật ngữ “HTML động” hoặc “mẫu động” hoặc “HTML mẫu động” được sử dụng khá thường xuyên trong bài viết này. Tất cả đều có nghĩa giống nhau. mô tả về "mẫu độc lập" trong phần giới thiệu ở trên
2. Thuật ngữ “các thành phần động” có nghĩa là tất cả được đặt/sử dụng trong một HTML động;
3. “Thành phần máy chủ”. Đối với một thành phần hoặc thành phần được chiếu trong HTML động, Thành phần máy chủ của nó là thành phần đã tạo ra nó, e. g. trong ý chính “HTML động mẫu” bên dưới, Thành phần máy chủ của [yourComponent6] là thành phần sẽ tạo ra HTML động đó, không phải là bên trong mà [yourComponent6] được đặt trong HTML động

Kiến thức tiên quyết

Là điều kiện tiên quyết để hiểu đầy đủ về 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 chưa biết về chúng

1. Trình tải thành phần động sử dụng ComponentFactoryResolver
2. Chiếu nội dung trong góc - 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 số mà chúng tôi sẽ sử dụng trong “mẫu HTML động” mẫu của chúng tôi trong phần tiếp theo

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

Hãy xem nhanh YourComponent3, các bình luận chống lại name, 0 và 1. Điều này chuyển thành hạn chế đầu tiên của giải pháp đề xuất của tôi. một thuộc tính 2 phải được khởi tạo thành giá trị 3. Có hai phần ở đây

1. Đầu vào phải thuộc 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 hết là giữ cho các kiểu dữ liệu đầu vào của các thành phần của bạn nhất quán với kiểu dữ liệu của giá trị mà bạn sẽ đặt trên chúng
2. Đầu vào phải được khởi tạo. Mặt khác, Bản mô tả loại bỏ thuộc tính đó trong quá trình dịch mã, điều này gây ra sự cố cho 6 (xem phần giải pháp sau) — nó không thể tìm thấy thuộc tính đầu vào của thành phần đó trong 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

HTML động mẫu

Chúng ta cũng hãy định nghĩa một HTML động. Tất cả các cú pháp được đề cập ở đây sẽ hoạt động. Mọi cú pháp góc KHÔNG được đề cập ở đây sẽ không được hỗ trợ

HTML động mẫu

Hãy để tôi làm rõ lại 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, phép nội suy, liên kết dữ liệu hai chiều, liên kết dữ liệu [biến], ng-template, ng-container, v.v. trong một HTML mẫu động

Để làm rõ thêm về hạn chế “7 string”, chỉ các giá trị chuỗi được mã hóa cứng mới được hỗ trợ, tôi. e. không có biến như 8. Điều này là do, để hỗ trợ liên kết đối tượng như vậy, chúng tôi cần phân tích cú pháp các thuộc tính HTML và đánh giá giá trị của chúng trong thời gian chạy. Nói dễ hơn làm

Các lựa chọn thay thế cho cú pháp không được hỗ trợ

1. chỉ thị
   Nếu bạn thực sự muốn sử dụng một chỉ thị thuộc tính, thì cách thay thế tốt nhất ở đây là tạo một 9 để thay thế. Nói cách khác, bạn có thể tạo thành phần của mình với bất kỳ bộ chọn nào được hỗ trợ bởi Góc — bộ chọn 0, bộ chọn 1, bộ chọn 2 hoặc thậm chí là sự kết hợp của chúng, e. g. 3
2. Ràng buộc dữ liệu đối tượng/biến, phép nội suy, v.v.
   Khi bạn đính kèm HTML động của mình vào DOM, bạn có thể dễ dàng tìm kiếm thuộc tính đó bằng cách sử dụng 4 hoặc 5 và đặt giá trị của nó trước khi tạo các thành phần. Ngoài ra, bạn có thể tự thao tác với chuỗi HTML trước khi gắn nó vào DOM. (Điều này sẽ trở nên rõ ràng hơn trong phần tiếp theo. )

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

Đã đến lúc cung cấp HTML động 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. Đoạn mã dưới đây cung cấp một vài ví dụ đăng ký một 9 đại diện cho một luồng HTML mẫu và đính kèm nó vào DOM theo độ phân giải

Đang tải HTML động cho thành phần trong thời gian chạyNhà máy kết xuất thành phần động

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

1. Tìm các phần tử HTML của Thành phần trong DOM (của HTML động)
2. Tạo các Thành phần góc phù hợp và đặt thuộc tính 7 của chúng
3. Nối chúng vào ứng dụng Angular

Đó chính xác là những gì 1 làm bên dưới

Nhà máy linh kiện động

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ỉ đề cập đến một số phần cần giải thích thêm

1. 2. Đây là trung tâm của giải pháp này — API do Angular cung cấp để tạo thành phần theo mã
2. Đối số đầu tiên 3 được yêu cầu bởi Angular để đưa các phụ thuộc vào các thể hiện đang được tạo
3. Đối số thứ hai 4 là một mảng gồm tất cả “Nút có thể chiếu” của thành phần sẽ được tạo, e. g. trong ý chính “HTML động mẫu”, 5 và 6 là các nút có thể chiếu của . Nếu đối số này không được cung cấp, thì các Nút bên trong này 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 phiên bản của thành phần đã tạo và đặt giá trị của chúng thành giá trị của các thuộc tính tương ứng của Phần tử máy chủ [yourComponent6]0, nhưng chỉ khi được tìm thấy, nếu không, đầu vào sẽ giữ giá trị mặc định được xác định trong thành phần
5. [yourComponent6]1. Điều này làm cho Angular nhận thức được các thành phần được tạo và đưa chúng vào chu kỳ phát hiện thay đổi của nó
6. [yourComponent6]2. Angular sẽ không tự động loại bỏ bất kỳ thành phần nào được tạo động cho chúng tôi. Do đó, chúng ta cần thực hiện điều đó một cách rõ ràng khi Thành phần máy chủ đang bị 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ẽ là [yourComponent6]3 được giải thích trong phần tiếp theo
7. Lưu ý rằng [yourComponent6]4 chỉ hoạt động với một loại thành phần [yourComponent6]5 trên mỗi phiên bản 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 xuất xưởng 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. (Xin lỗi, không thể nghĩ ra một cái tên tốt hơn. ) Ngoài ra, lý do khác để có lớp trình bao bọc này là bạn không thể tiêm trực tiếp [yourComponent6]7 của Angular, đây là phần phụ thuộc hàm tạo thứ hai của [yourComponent6]4. (Phải có cách tốt hơn để quản lý quá 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 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 của [yourComponent6]4 cho mỗi loại "thành phần động" bằng cách 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 thao tác “khởi tạo” tùy chỉnh trên các thành phần mới được tạo. Xem Dòng 55–65

Mã cuối cùng về cách sử dụng nhà máy thành phần để liên kết các thành phần trong thời gian chạy

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

Thông báo trong [yourComponent6]3 rằng [yourComponent6]6 đã được cung cấp trong bộ trang trí 5 của riêng nó và được tiêm bằng cách sử dụ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 sử dụng đúng phiên bản của 7 để 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ì phiên bản 7 sẽ ở cấp độ đó, điều này có thể gây ra những hậu quả không lường trước được, e. g. liên kết tương đối trong [yourComponent6]1 được sử dụng trong, chẳng hạn như, [yourComponent6]2 có thể không hoạt động chính xác

Đó là nó

Phần kết luận

Nếu bạn đã làm được đến đây, có thể bạn đang nghĩ, “Meh. Đây là phiên bản rút gọn hoàn toàn các khả năng của mẫu Angular. Đ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 thứ “tăng sức mạnh”. 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 đủ trong thời gian chạy, nhưng chúng tôi đã thấy trong bài viết này cách chúng tôi có thể hiển thị ít nhất “các thành phần có đầu vào chuỗi tĩnh”. Đây có vẻ như là một giải pháp bị tê liệt, khi so sánh với tất cả các tính năng tuyệt vời mà Angular cung cấp tại thời điểm biên dịch. Tuy nhiên, trên thực tế, điều này vẫn có thể giải quyết được nhiều trường hợp sử dụng yêu cầu hiển thị mẫu động

Hãy coi đây là một phần thành công

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

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

Làm cách nào để hiển thị tệp HTML trong Angular?

Nếu giá trị HTML chứa thẻ Nếu bạn cố gắng hiển thị thẻ .

Làm cách nào để hiển thị động HTML trong Angular?

Khi bạn đính kèm HTML động của mình vào DOM, bạn có thể dễ dàng tìm kiếm thuộc tính đó bằng máy chủ. Phần tử. getElementById. Tên. TagName hoặc querySelector. Tất cả và đặt giá trị của nó trước khi bạn tạo các thành phần . Ngoài ra, bạn có thể tự thao tác với chuỗi HTML trước khi gắn nó vào DOM.

Làm cách nào để đưa HTML vào Angular?

Việc đưa HTML vào một thành phần bằng cách sử dụng Angular có thể được thực hiện bằng cách sử dụng thuộc tính “innerHTML” của vùng chứa (thường là “div” hoặc “p”). However, there are two issues with this approach: If the component defines some CSS styles (and uses the default view encapsulation), they won't be applied to the inserted HTML.

Làm cách nào để hiển thị dữ liệu HTML trong Angular?

Hiển thị dữ liệu trong liên kết lượt xem .

Hiển thị các thuộc tính thành phần với phép nội suy

Chọn nguồn mẫu

Khởi tạo

Thêm logic để lặp qua dữ liệu

Tạo lớp cho dữ liệu

Sử dụng lớp anh hùng

Hiển thị có điều kiện với NgIf

Tóm lược