Của mẫu bên tronghtml

Đó là một trong những ngày tôi đang bận làm việc với các tính năng mới cho dự án văn phòng của mình. Đột nhiên, một cái gì đó thu hút sự chú ý của tôi

DOM được kết xuất cuối cùng trong Angular

Trong khi kiểm tra DOM, tôi thấy ngcontent được áp dụng trên các phần tử bởi Angular. Hmm… nếu chúng chứa các thành phần trong DOM cuối cùng thì việc sử dụng là gì?

Trong hành trình tìm kiếm câu trả lời cho những câu hỏi của mình, tôi đã phát hiện ra khái niệm về . Trước sự ngạc nhiên của tôi, cũng có *ngTemplateOutlet. Tôi bắt đầu hành trình tìm kiếm sự rõ ràng về hai khái niệm nhưng giờ tôi đã có bốn khái niệm trong số đó, nghe gần giống nhau

Bạn đã từng rơi vào hoàn cảnh này chưa? . Vì vậy, không có gì khó chịu, hãy xem từng cái một

1.

Như tên gợi ý, là một phần tử mẫu mà Angular sử dụng với các chỉ thị cấu trúc [*ngIf, *ngFor, [ngSwitch] và các chỉ thị tùy chỉnh]

Các phần tử mẫu này chỉ hoạt động khi có các chỉ thị cấu trúc. Góc bọc phần tử máy chủ [mà chỉ thị được áp dụng] bên trong và tiêu thụ trong DOM đã hoàn thành bằng cách thay thế nó bằng nhận xét chẩn đoán

Hãy xem xét một ví dụ đơn giản về *ngIf

Ví dụ 1- Quá trình góc diễn giải các chỉ thị cấu trúc

Hình trên là giải thích Góc của *ngIf. Góc đặt phần tử máy chủ mà chỉ thị được áp dụng trong và giữ nguyên máy chủ. DOM cuối cùng tương tự như những gì chúng ta đã thấy ở đầu bài viết này

Ví dụ 1- DOM kết xuất cuối cùng

Cách sử dụng

Chúng ta đã thấy cách Angular sử dụng nhưng nếu chúng ta muốn sử dụng nó thì sao?

Example 2- Using

Ở đây 6 là thuộc tính 7 của thành phần được đặt thành giá trị 8. Đầu ra của đoạn mã trên trong DOM

Ví dụ 2- DOM kết xuất cuối cùng

Không có gì được kết xuất. . [

Nhưng tại sao chúng ta không thể thấy thông báo của mình ngay cả sau khi sử dụng đúng với chỉ thị cấu trúc?

Đây là kết quả mong đợi. Như chúng ta đã thảo luận, Angular thay thế bằng các nhận xét chẩn đoán. Không còn nghi ngờ gì nữa, đoạn mã trên sẽ không tạo ra bất kỳ lỗi nào, vì Angular hoàn toàn ổn với trường hợp sử dụng của bạn. Bạn sẽ không bao giờ biết chính xác những gì đã xảy ra đằng sau hậu trường

Hãy so sánh hai DOM trên được kết xuất bởi Angular

Ví dụ 1 vs Ví dụ 2

Nếu bạn để ý kỹ, sẽ có thêm một thẻ nhận xét trong DOM cuối cùng của Ví dụ 2. Mã mà Angular giải thích là

Quá trình giải thích góc cho Ví dụ 2

Angular bao bọc máy chủ của bạn trong một khác và chuyển đổi không chỉ bên ngoài thành nhận xét chẩn đoán mà còn cả bên trong. Đây là lý do tại sao bạn không thể xem bất kỳ tin nhắn nào của mình

Để thoát khỏi điều này, có hai cách để có được kết quả mong muốn của bạn

Correct usage of

Phương pháp 1

Trong phương pháp này, bạn đang cung cấp cho Angular định dạng không có đường mà không cần xử lý thêm. Lần này, Angular sẽ chỉ chuyển đổi thành nhận xét nhưng để nguyên nội dung bên trong nó [chúng không còn bên trong bất kỳ nào như trong trường hợp trước]. Do đó, nó sẽ hiển thị nội dung chính xác

Để biết thêm về cách sử dụng định dạng này với các chỉ thị cấu trúc khác, hãy tham khảo bài viết này

Phương pháp 2

Đây là một định dạng khá ít thấy và ít được sử dụng [dùng hai anh em ]. Ở đây chúng tôi đang cung cấp một tham chiếu mẫu cho *ngIf trong 8 của nó để cho biết mẫu nào nên được sử dụng nếu điều kiện là đúng

Không nên sử dụng nhiều như thế này [bạn có thể sử dụng thay thế] vì đây không phải là ý nghĩa của chúng. Chúng được sử dụng làm nơi chứa các mẫu có thể được sử dụng lại ở nhiều nơi. Chúng tôi sẽ đề cập nhiều hơn về điều này trong phần sau của bài viết này

2.

Bạn đã bao giờ viết hoặc nhìn thấy mã giống như thế này chưa

ví dụ 1

Lý do tại sao nhiều người trong chúng ta viết mã này là không có khả năng sử dụng nhiều chỉ thị cấu trúc trên một phần tử máy chủ duy nhất trong Angular. Bây giờ mã này hoạt động tốt nhưng nó giới thiệu thêm một số 1 trống trong DOM nếu 2 là một giá trị giả có thể không bắt buộc

Ví dụ 1- DOM kết xuất cuối cùng

Người ta có thể không quan tâm đến một ví dụ đơn giản như thế này nhưng đối với một ứng dụng lớn có DOM phức tạp [để hiển thị hàng chục nghìn dữ liệu], điều này có thể trở nên rắc rối vì các phần tử có thể có các trình nghe được đính kèm với chúng vẫn sẽ ở đó trong DOM lắng nghe các sự kiện

Điều thậm chí còn tồi tệ hơn là mức độ lồng ghép mà bạn phải thực hiện để áp dụng kiểu dáng [CSS] của mình

Hình ảnh từ. Bên trong Unbounce

Đừng lo lắng, chúng tôi có để giải cứu

Angular là một phần tử nhóm không can thiệp vào kiểu hoặc bố cục vì Angular không đặt nó trong DOM

Vì vậy, nếu chúng ta viết Ví dụ 1 với

Example 1 with

Chúng tôi nhận được DOM cuối cùng là

Final rendered DOM with

Hãy xem chúng tôi đã thoát khỏi những 1 trống rỗng đó. Chúng ta nên sử dụng khi chúng ta chỉ muốn áp dụng nhiều chỉ thị cấu trúc mà không đưa vào bất kỳ phần tử bổ sung nào trong DOM của chúng ta

Để biết thêm thông tin tham khảo tài liệu. Có một trường hợp sử dụng khác trong đó nó được sử dụng để đưa một mẫu động vào một trang. Tôi sẽ đề cập đến trường hợp sử dụng này trong phần cuối của bài viết này

3.

Chúng được sử dụng để tạo các thành phần cấu hình. Điều này có nghĩa là các thành phần có thể được cấu hình tùy thuộc vào nhu cầu của người dùng. Điều này còn được gọi là Chiếu nội dung. Các thành phần được sử dụng trong các thư viện đã xuất bản sử dụng để tự cấu hình

Hãy xem xét một thành phần 9 đơn giản

Ví dụ 1- định nghĩa Chiếu nội dung với thành phần

Nội dung HTML được truyền trong thẻ mở và thẻ đóng của thành phần 9 là nội dung được chiếu. Đây là cái mà chúng tôi gọi là Trình chiếu nội dung. Nội dung sẽ được hiển thị bên trong trong thành phần. Điều này cho phép người tiêu dùng của thành phần 9 chuyển bất kỳ chân trang tùy chỉnh nào trong thành phần và kiểm soát chính xác cách họ muốn nó được hiển thị

nhiều phép chiếu

Điều gì sẽ xảy ra nếu bạn có thể quyết định nội dung nào sẽ được đặt ở đâu? . Cần một bộ chọn phần tử để quyết định nội dung nào sẽ chiếu bên trong một cụ thể

Đây là cách

Example 2- Multi-content projection with updated

Chúng tôi đã sửa đổi định nghĩa 9 để thực hiện phép chiếu Đa nội dung. Thuộc tính 4 chọn loại nội dung sẽ được hiển thị bên trong một cụ thể. Ở đây chúng tôi có 4 đầu tiên để hiển thị phần tử tiêu đề *ngTemplateOutlet1. Nếu nội dung được chiếu không có phần tử *ngTemplateOutlet1 thì nội dung đó sẽ không hiển thị bất kỳ nội dung nào. Tương tự, 4 thứ hai tìm kiếm một *ngTemplateOutlet4. Phần còn lại của nội dung được hiển thị bên trong cuối cùng mà không có 4

Gọi thành phần sẽ giống như

Example 2- Calling of component in parent component

4. *ofTemplateOutlet

...Chúng được sử dụng làm nơi chứa các mẫu có thể được sử dụng lại ở nhiều nơi. Chúng tôi sẽ đề cập nhiều hơn về điều này trong phần sau của bài viết này.

…Có một trường hợp sử dụng khác trong đó nó được sử dụng để đưa một mẫu động vào một trang. Tôi sẽ đề cập đến trường hợp sử dụng này trong phần cuối của bài viết này.

Đây là phần mà chúng ta sẽ thảo luận về hai điểm đã đề cập ở trên. *ngTemplateOutlet được sử dụng cho hai trường hợp — để chèn một mẫu chung vào các phần khác nhau của chế độ xem bất kể vòng lặp hoặc điều kiện và để tạo một thành phần có cấu hình cao

tái sử dụng mẫu

Xem xét một chế độ xem mà bạn phải chèn một mẫu ở nhiều nơi. Ví dụ, một logo công ty được đặt trong một trang web. Chúng tôi có thể đạt được điều đó bằng cách viết mẫu cho logo một lần và sử dụng lại nó ở mọi nơi trong chế độ xem

Sau đây là đoạn mã

Ví dụ 1- Tái sử dụng mẫu

Như bạn có thể thấy, chúng tôi chỉ viết mẫu logo một lần và sử dụng nó ba lần trên cùng một trang với một dòng mã

*ngTemplateOutlet cũng chấp nhận một đối tượng bối cảnh có thể được chuyển để tùy chỉnh đầu ra mẫu chung. Để biết thêm thông tin về đối tượng ngữ cảnh, hãy tham khảo tài liệu chính thức

thành phần tùy chỉnh

Trường hợp sử dụng thứ hai cho *ngTemplateOutlet là các thành phần được tùy chỉnh cao. Xem xét ví dụ trước của chúng tôi về thành phần 9 với một số sửa đổi

Ví dụ 2- Tạo các thành phần tùy biến, nội dung dự án. html

Trên đây là phiên bản sửa đổi của thành phần 9 chấp nhận ba thuộc tính đầu vào — 2, 3, 4. Sau đây là đoạn trích cho 5

Ví dụ 2- Tạo các thành phần tùy biến, nội dung dự án. ts

Những gì chúng tôi đang cố gắng đạt được ở đây là hiển thị tiêu đề, nội dung và chân trang khi nhận được từ thành phần chính của 9. Nếu bất kỳ mẫu nào trong số chúng không được cung cấp, thành phần của chúng tôi sẽ hiển thị mẫu mặc định ở vị trí của nó. Do đó, việc tạo ra một thành phần tùy biến cao

Để sử dụng thành phần được sửa đổi gần đây của chúng tôi

Example 2- Using newly modified component

Đây là cách chúng tôi sẽ chuyển các tham chiếu mẫu cho thành phần của chúng tôi. Nếu bất kỳ một trong số chúng không được thông qua thì thành phần sẽ hiển thị mẫu mặc định

nội dung so với. *ofTemplateOutlet

Cả hai đều giúp chúng tôi đạt được các thành phần tùy biến cao nhưng nên chọn cái nào và khi nào?

Có thể thấy rõ ràng rằng *ngTemplateOutlet cho chúng ta thêm sức mạnh hiển thị mẫu mặc định nếu không có mẫu nào được cung cấp

Đây không phải là trường hợp của 8. Nó hiển thị nội dung như là. Ở mức tối đa, bạn có thể chia nhỏ nội dung và hiển thị chúng ở các vị trí khác nhau trong chế độ xem của mình với sự trợ giúp của thuộc tính 4. Bạn không thể hiển thị nội dung trong vòng 8 một cách có điều kiện. Bạn phải hiển thị nội dung nhận được từ phụ huynh mà không có cách nào để đưa ra quyết định dựa trên nội dung

Tuy nhiên, việc lựa chọn giữa hai hoàn toàn phụ thuộc vào trường hợp sử dụng của bạn. Ít nhất bây giờ chúng tôi có một vũ khí mới *ngTemplateOutlet trong kho vũ khí của mình, cung cấp nhiều quyền kiểm soát hơn đối với nội dung bên cạnh các tính năng của 8

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Prateek Mishra

Đọc thêm bài viết

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu