Lập trình Angular - Bài 6: View Encapsulation trong Angular

Lập trình Angular - Bài 6: View Encapsulation trong Angular

Kenjinguyen -
0
 View Encapsulation

Encapsulation là gì?

Encapsulation (Tính đóng gói) là một trong những khái niệm cơ bản của lập trình hướng đối tượng (OOP). Encapsulation là việc đưa tất cả thông tin, dữ liệu quan trọng vào bên trong một đối tượng (object). Sau đó, khi một đối tượng được khởi tạo từ lớp (class), thì dữ liệu và phương thức (method) đã được đóng gói trong đối tượng đó. Khi sử dụng, ta chỉ cần gọi tên phương thức chứ không cần truy cập đến dữ liệu bên trong.

View Encapsulation trong Angular

View Encapsulation trong Angular là một chiến lược xác định cách Angular ẩn (đóng gói) các style CSS được xác định trong một component sẽ không ảnh hưởng đến style CSS của các component khác của ứng dụng (khi cùng tên class hoặc style CSS).
Angular cung cấp 3 chiến lược để xác định cách các style CSS được áp dụng:
  • ViewEncapsulation.None
  • ViewEncapsulation.Emulated: Đây là phương thức đóng gói mặc định
  • ViewEncapsulation.ShadowDOM
viewEncapsulation Native không được dùng nữa kể từ phiên bản Angular 6.0.8 và được thay thế bằng viewEncapsulation ShadowDom.

Cách thêm View Encapsulation vào các component

2
3
4
5
6
7
8
@Component({
  template: `<p>Using Emulator</p>`,
  styles: ['p { color:red}'],
  encapsulation: ViewEncapsulation.Emulated     //This is default
//encapsulation: ViewEncapsulation.None
//encapsulation: ViewEncapsulation.ShadowDOM
})

ViewEncapsulation.None

  • ViewEncapsulation.None được sử dụng khi chúng ta không muốn đóng gói. Khi bạn sử dụng điều này, các style CSS được xác định trong component loại này sẽ ảnh hưởng đến các element của các component cha và anh em của nó (ảnh hưởng nếu các component cha và anh em (mà chưa xác định style CSS) của nó chứ không ghi đè).
  • Style CSS được xác định trong component mà đã được thêm encapsulation: ViewEncapsulation.None được đưa vào global style và ghi đè bất kỳ style CSS nào đã xác định trước đó mà ảnh hưởng đến component loại này.

ViewEncapsulation.Emulated

  • Đây là chiến lược mặc định của Angular. Nó tách biệt các style CSS giữa các thành phần với nhau. Các style được xác định trong component loại này sẽ không ảnh hưởng và cũng không ghi đè của các style đã xác định trước đó ở các compoenent khác.
  • Các global style có thể ảnh hưởng đến các element style trong thành phần loại này nếu nó chưa xác định style riêng.
  • Angular sẽ thêm các unique HTML attribute vào các element của component loại này để đánh dấu việc đóng gói các style local cho component
Note từ code ở ví dụ trên:

1
2
3
4
5
 <app-emulated _ngcontent-pnm-c47 _nghost-pnm-c46>
<p _ngcontent-pnm-c46 class="encapsulation">This is View Encapsulation Emulated with <b _ngcontent-pnm-c46 style="color: blue;">blue</b> color </p> </app-emulated> 

ViewEncapsulation.ShadowDOM

  • Shadow dom đạt được sự đóng gói thực sự. Nó tách biệt hoàn toàn style của component loại này khỏi các style trong các component khác của ứng dụng.
  • Component loại này bị ảnh hưởng bởi style của Component None Encapsulation và Component Style của chính nó, không bị ảnh hưởng bởi Global Style và style của các component cha và anh em của nó.
  • Shadow dom chưa được hỗ trợ trong tất cả các trình duyệt. Bạn có thể kiểm tra nó tại đây.

Reference

Tags:

Đăng nhận xét

Mới hơn Cũ hơn