Bộ chọn css trong góc là gì?
Trong bài đăng này, chúng ta sẽ tìm hiểu cách hoạt động của cơ chế tạo kiểu Angular mặc định (Đóng gói mô phỏng) và chúng ta cũng sẽ đề cập đến hỗ trợ Sass của Angular CLI và một số phương pháp hay nhất về cách tận dụng nhiều tính năng Sass có sẵn Show
Chúng tôi sẽ nói về thời điểm sử dụng từng tính năng và tại sao, nói về lợi ích của việc tách biệt kiểu thành phần và cũng đề cập đến cách gỡ lỗi các kiểu của chúng tôi nếu có điều gì đó không hoạt động Đây là bài thứ hai của loạt bài hai phần về Kiểu dáng thành phần góc, nếu bạn đang muốn tìm hiểu về ngClass và ngStyle, hãy xem phần một Góc ngClass và ngStyle. Hướng dẫn hoàn chỉnh Mục lụcBài đăng này sẽ bao gồm các chủ đề sau
Để bao quát từng tính năng, chúng tôi sẽ thêm nhiều ví dụ vào ứng dụng mẫu Angular CLI nhỏ này, ứng dụng này sẽ sử dụng làm kiểu bên ngoài cho chủ đề mặc định của Bootstrap Tại sao cách ly phong cách?Vì vậy, không cần phải chần chừ thêm nữa, hãy bắt đầu với phần tìm hiểu sâu về Cách ly phong cách góc cạnh của chúng tôi. Câu hỏi đầu tiên xuất hiện trong đầu là tại sao chúng ta lại muốn tách biệt các kiểu thành phần của mình? Khi chúng tôi phát triển bộ kiểu dáng thành phần cho một ứng dụng, chúng tôi có xu hướng gặp phải các tình huống trong đó kiểu dáng từ một tính năng bắt đầu can thiệp vào kiểu dáng của tính năng khác Điều này là do các trình duyệt chưa hỗ trợ rộng rãi cho cách ly kiểu, nơi chúng tôi có thể hạn chế một kiểu chỉ được áp dụng cho một phần cụ thể của trang Nếu chúng tôi không cẩn thận và sắp xếp các kiểu của mình một cách có hệ thống để ngăn chặn vấn đề này (ví dụ: sử dụng một phương pháp như SMACSS), chúng tôi sẽ nhanh chóng gặp phải các vấn đề về bảo trì CSS Sẽ thật tuyệt nếu có thể tạo kiểu cho các thành phần của chúng ta chỉ bằng các bộ chọn ngắn, đơn giản và dễ đọc mà không phải lo lắng về tất cả các tình huống trong đó các kiểu đó có thể vô tình bị ghi đè phải không? Một lợi ích khác của cách ly phong cáchĐây là một kịch bản khác. chúng tôi đã thử sử dụng thành phần của bên thứ ba bao nhiêu lần, thêm nó vào ứng dụng của mình chỉ để phát hiện ra rằng thành phần đó đã bị hỏng hoàn toàn do các vấn đề về kiểu dáng? Cách ly kiểu sẽ cho phép chúng tôi gửi các thành phần của mình khi biết rằng các kiểu của thành phần đó (rất có thể) sẽ không bị ghi đè bởi các kiểu khác trong ứng dụng đích Điều này làm cho thành phần có thể tái sử dụng hiệu quả hơn nhiều, bởi vì thành phần bây giờ trong hầu hết các trường hợp sẽ chỉ hoạt động, bao gồm các kiểu Đóng gói chế độ xem góc mang lại cho chúng ta tất cả những lợi thế này, vì vậy hãy tìm hiểu cách thức hoạt động của nó Bản trình diễn đóng gói mô phỏng gócTrong phần này, chúng ta sẽ xem cách hoạt động của kiểu dáng thành phần Angular dưới mui xe, vì đây là cách tốt nhất để hiểu nó. Điều này cũng sẽ cho phép chúng tôi gỡ lỗi cơ chế nếu cần Đây là video trình diễn cơ chế mặc định đang hoạt động Để hưởng lợi từ cơ chế đóng gói chế độ xem mặc định của Angular, tất cả những gì chúng ta cần làm là thêm các lớp CSS của mình vào một tệp CSS bên ngoài Nhưng sau đó, thay vì thêm tệp này vào 7 của chúng tôi dưới dạng thẻ 8, thay vào đó, chúng tôi sẽ liên kết nó với thành phần của mình bằng cách sử dụng thuộc tính 0Màu đỏ sau đó sẽ được áp dụng cho nút này, như mong đợi. Nhưng nếu bây giờ chúng ta có một nút khác, chẳng hạn như trực tiếp ở cấp độ của 7 thì sao?Nếu bạn không biết rằng có một số loại cơ chế cách ly kiểu đang hoạt động, bạn có thể ngạc nhiên khi biết rằng nút này KHÔNG có nền đỏ Chuyện gì đang xảy ra ở đây vậy? Cách ly kiểu góc hoạt động như thế nào?Để hiểu rõ hơn cách đóng gói chế độ xem mặc định hoạt động, hãy xem phần tử HTML tùy chỉnh 2 sẽ trông như thế nào trong thời gian chạyMột số điều đang diễn ra ở cấp độ HTML thời gian chạy
Những tính chất này là gì?Vậy các thuộc tính này hoạt động như thế nào? Để đơn giản, chúng tôi sẽ xác định kiểu nội tuyến cho thành phần này bên cạnh mẫu Và sử dụng thành phần mới được xác định này, chúng tôi sẽ thêm nó vào mẫu của thành phần gốc ứng dụng
Thuộc tính cách ly kiểu phần tử máy chủ và phần tử mẫuVới thành phần thứ hai này đã sẵn sàng, chúng ta hãy có một cái nhìn thứ hai về HTML. Cách thức hoạt động của hai thuộc tính này sẽ trở nên rõ ràng hơn nhiều Lưu ý phần tử 6, giờ đây chúng ta có một thuộc tính máy chủ mới có tên là 7Phần tử 6 vẫn được gắn thẻ với thuộc tính 5 được áp dụng cho tất cả các phần tử mẫu trên thành phần gốc của ứng dụngNhưng bây giờ, các phần tử bên trong mẫu 6 giờ đây được áp dụng thuộc tính 11 để thay thếTóm tắt về cách hoạt động của các thuộc tính phần tử máy chủ và mẫuSau đó, hãy tóm tắt cách các thuộc tính HTML đặc biệt này hoạt động và sau đó xem cách chúng kích hoạt tính năng cách ly kiểu
Đây là tất cả minh bạch và được thực hiện dưới mui xe cho chúng tôi Làm cách nào để các thuộc tính này cho phép đóng gói chế độ xem?Sự hiện diện của các thuộc tính này có thể cho phép chúng tôi viết các kiểu CSS theo cách thủ công, được nhắm mục tiêu nhiều hơn chỉ là các kiểu đơn giản mà chúng tôi có trên mẫu của mình Ví dụ: nếu chúng ta chỉ muốn phạm vi màu xanh lam cho thành phần 6, chúng ta có thể viết thủ công kiểu sauMặc dù kiểu 1 có thể áp dụng cho bất kỳ phần tử nào có lớp 6 ở bất kỳ đâu trên trang, nhưng kiểu 2 sẽ chỉ hoạt động đối với các phần tử có thuộc tính được đặt tên lạ đóVì vậy, điều này có nghĩa là kiểu 2 chỉ có phạm vi hiệu quả đối với các thành phần của mẫu thành phần 6 và sẽ không ảnh hưởng đến bất kỳ thành phần nào khác của trangVì vậy, bây giờ chúng ta có thể thấy cách hai thuộc tính đặc biệt đó kích hoạt một số loại cách ly kiểu, nhưng sẽ rất cồng kềnh nếu phải sử dụng các thuộc tính đó theo cách thủ công trong CSS của chúng ta (và trên thực tế, chúng ta không nên)
Làm thế nào để góc đóng gói phong cách?Khi khởi động (hoặc lúc xây dựng nếu sử dụng AOT), Angular sẽ xem kiểu nào được liên kết với thành phần nào, thông qua thuộc tính thành phần 19 hoặc 0Sau đó, Angular sẽ lấy các kiểu đó và áp dụng chúng một cách rõ ràng với các thuộc tính cách ly tương ứng, sau đó sẽ đưa các kiểu trực tiếp vào tiêu đề trang dưới dạng thẻ 21Thuộc tính 11 là duy nhất cho các phần tử của mẫu 6, do đó, kiểu sẽ chỉ nằm trong phạm vi của các phần tử đóVà đó là cách hoạt động của cơ chế đóng gói chế độ xem mặc định của Angular Cơ chế này không chống đạn 100% vì nó không đảm bảo khả năng cách ly hoàn hảo, nhưng trên thực tế, nó gần như luôn hoạt động Cơ chế này không dựa trên DOM bóng mà thay vào đó là các thuộc tính HTML đặc biệt này, vì vậy nếu chúng tôi thực sự muốn, chúng tôi vẫn có thể ghi đè các kiểu này Nhưng do cơ chế cách ly Shadow Dom gốc hiện chỉ khả dụng trong Chrome và Opera, chúng tôi chưa thể dựa vào nó Cơ chế này rất hữu ích vì nó cho phép chúng ta viết các kiểu đơn giản không dễ bị phá vỡ, nhưng đôi khi chúng ta có thể muốn phá vỡ sự cô lập này một cách có chọn lọc Hãy tìm hiểu một vài cách để làm điều đó và tại sao chúng ta muốn làm điều đó Bộ chọn lớp giả ng set defaults.styleExt scss 1Đôi khi, chúng tôi muốn tạo kiểu cho chính phần tử HTML tùy chỉnh của thành phần chứ không phải thứ gì đó bên trong mẫu của nó Ví dụ, giả sử rằng chúng ta muốn tạo kiểu cho chính thành phần 2, bằng cách thêm vào nó, chẳng hạn như một đường viền phụChúng tôi không thể làm điều đó bằng cách sử dụng các kiểu bên trong tệp liên kết 26 của nó, phải không?Điều này là do tất cả các kiểu bên trong tệp đó sẽ nằm trong phạm vi các thành phần của mẫu chứ không phải chính thành phần bên ngoài 2Nếu chúng ta muốn tạo kiểu cho phần tử máy chủ của chính thành phần đó, chúng ta cần bộ chọn lớp giả 1 đặc biệt. Đây là phiên bản mới của 26 của chúng tôi sử dụng nóBộ chọn này sẽ đảm bảo các kiểu đó chỉ nhắm mục tiêu phần tử 2. Hãy nhớ rằng tài sản 4 mà chúng ta đã nói trước đây? Việc sử dụng 4 đặc biệt sẽ đảm bảo rằng các kiểu đó chỉ nằm trong phạm vi của phần tử 2, bởi vì 2 được thêm thuộc tính đó vào thời gian chạyNếu bạn muốn xem minh họa trực quan về hoạt động của bộ chọn lớp giả 1, hãy xem video nàyKết hợp bộ chọn ng set defaults.styleExt scss
|