View encapsulation ใน angular

Angular

Created At : 2023-09-18 22:51

Views 👀 :

View encapsulation ใน Angular เป็นเทคนิคที่ใช้แยก CSS styles ของคอมโพเนนต์ออกจาก CSS styles ของคอมโพเนนต์อื่นๆ นี่จะช่วยป้องกันไม่ให้ CSS styles ของคอมโพเนนต์หนึ่งไปรบกวน CSS styles ของคอมโพเนนต์อื่นๆ

มี 3 แบบของ view encapsulation ใน Angular คือ

Emulated encapsulation (ค่าเริ่มต้น): Angular สร้าง shadow DOM สำหรับแต่ละคอมโพเนนต์และใช้ CSS styles ของคอมโพเนนต์นั้นภายใน shadow DOM
Native encapsulated: Angular ใช้ CSS encapsulation ที่มีอยู่ของเบราว์เซอร์เพื่อแยก CSS styles ของคอมโพเนนต์ออกจาก CSS styles ของคอมโพเนนต์อื่นๆ
None encapsulation: Angular ไม่แยก CSS styles ของคอมโพเนนต์ออกจาก CSS styles ของคอมโพเนนต์อื่นๆ

เราสามารถเลือกใช้ view encapsulation ที่เหมาะสมกับความต้องการของเราได้ โดยกำหนดค่า encapsulation ใน decorator @Component()

ตัวอย่างการเลือกใช้ view encapsulation

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.Emulated // หรือ NativeEncapsulation.Native หรือ ViewEncapsulation.None
})
export class AppComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

ข้อดีของการใช้ view encapsulation

ป้องกันไม่ให้ CSS styles ของคอมโพเนนต์หนึ่งไปรบกวน CSS styles ของคอมโพเนนต์อื่นๆ
ทำให้ CSS styles ของคอมโพเนนต์อ่านง่ายขึ้นและบำรุงรักษาง่ายขึ้น
ช่วยให้เราใช้ CSS styles แบบ global ได้อย่างมีประสิทธิภาพมากขึ้น

ข้อเสียของการใช้ view encapsulation

อาจส่งผลต่อประสิทธิภาพของแอปพลิเคชัน เนื่องจาก Angular ต้องสร้าง shadow DOM สำหรับแต่ละคอมโพเนนต์เมื่อใช้ emulated encapsulation

สรุป

View encapsulation เป็นเทคนิคที่ทรงพลังที่ช่วยให้เราสามารถแยก CSS styles ของคอมโพเนนต์ออกจาก CSS styles ของคอมโพเนนต์อื่นๆ นี่จะช่วยป้องกันไม่ให้ CSS styles ของคอมโพเนนต์หนึ่งไปรบกวน CSS styles ของคอมโพเนนต์อื่นๆ และทำให้ CSS styles ของคอมโพเนนต์อ่านง่ายขึ้นและบำรุงรักษาง่ายขึ้น