ตัวเลือก :host, :host-context, ::ng-deep ของ Angular

บทความนี้จะทำให้คุณมีความเข้าใจเชิงลึกเกี่ยวกับตัวเลือกพิเศษต่างๆ ใน ​​Angular: host, :host-context, ::ng-deep ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!

1. :host

:host หมายถึงการเลือกส่วนประกอบปัจจุบัน [บทช่วยสอนที่เกี่ยวข้องที่แนะนำ: "บทช่วยสอนเชิงมุม"]

1.1 เลือกองค์ประกอบโฮสต์

ใช้ตัวเลือกคลาสหลอก :host เพื่อเลือกองค์ประกอบใน宿主元素ส่วนประกอบ (สัมพันธ์กับองค์ประกอบภายในเทมเพลตส่วนประกอบ) หากไม่มีองค์ประกอบลูก จะเทียบเท่ากับการเลือก宿主元素ทั้งหมด

หากมี html ต่อไปนี้:

 <รายละเอียดแอป</รายละเอียดแอป>

รูปแบบของส่วนประกอบ app-detail (รูปแบบของ app-detail ทั้งหมด) เป็นดังนี้:

 :เจ้าภาพ {
จอแสดงผล: อินไลน์บล็อก;
พื้นหลัง: สีแดง;
-

Elements เบราว์เซอร์เลือกองค์ประกอบ app-detail และสไตล์จะเป็นดังนี้:

 [_nghost-wtd-c445] {
จอแสดงผล: อินไลน์บล็อก;
สีพื้นหลัง: สีแดง;
-

จะเห็นได้ว่า :host ทำหน้าที่โดยตรงกับ宿主元素本身

1.2 เลือกองค์ประกอบลูกขององค์ประกอบโฮสต์

คุณสามารถเพิ่มตัวเลือกหลังจาก :host เพื่อเลือก子元素ตัวอย่างเช่น :host h1 ค้นหาแท็ก h1 ภายในมุมมองส่วนประกอบ

 :โฮสต์ h1 {
	สี:สีแดง;
-

1.3 การเลือกองค์ประกอบโฮสต์แบบมีเงื่อนไข

มันจะมีผลก็ต่อเมื่อโฮสต์ถูกใช้เป็นเป้าหมายและมีคลาสที่ใช้งานอยู่

 :host(.ใช้งานอยู่){
	เส้นขอบกว้าง: 3px;
-

แบบนี้:

 <app-detail class="active"></app-detail>

2. ::ng-deep

::ng-deep สามารถละเว้นความสัมพันธ์แบบลำดับชั้นที่ซ้อนกันของ classNames ระดับกลางได้ ค้นหา className ที่คุณต้องการแก้ไขโดยตรง

เมื่อใช้คอมโพเนนต์ของบริษัทอื่น คุณต้องแก้ไขรูปแบบของคอมโพเนนต์ในกรณีนี้ ให้ใช้ .

2.1 จากองค์ประกอบโฮสต์ไปจนถึงองค์ประกอบปัจจุบัน จากนั้นไปยังองค์ประกอบย่อย h3 ทั้งหมดใน DOM รวมถึงองค์ประกอบ h3 ที่ใช้ส่วนประกอบของบุคคลที่สามในองค์ประกอบปัจจุบัน

 :host ::ng-ลึก h3 {
รูปแบบตัวอักษร: ตัวเอียง;
-

2.2 ค้นหาประเภทเฉพาะภายใต้ประเภทที่กำหนด

 .card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
ความสูง: 120px;
ขอบบน: -16px;
-

3. :host-context

หากจำเป็นต้องปฏิบัติตามเงื่อนไขบางประการก่อนจึงจะสามารถใช้สไตล์ได้ โดยจะค้นหาคลาส CSS ในโหนดระดับ祖先ของ宿主元素ของคอมโพเนนต์ปัจจุบัน จนถึงโหนดรูทของเอกสาร如果พบ รูปแบบต่อไปนี้จะถูกนำไปใช้กับองค์ประกอบภายใน本组件

3.1 เลือกองค์ประกอบในองค์ประกอบโฮสต์ส่วนประกอบ

 : โฮสต์บริบท {
	สี:สีแดง;
-

3.2 จะมีผลเฉพาะเมื่อโฮสต์ถูกใช้เป็นเป้าหมายและมีคลาสที่ใช้งานอยู่

ในตัวอย่างต่อไปนี้ สไตล์ background-color จะถูกนำไปใช้กับองค์ประกอบ <h2> ทั้งหมด本组件内部เฉพาะในกรณีที่祖先元素(องค์ประกอบโฮสต์สามารถใช้ได้) มีคลาส CSS theme-light

 :host-context(.theme-light) h2 {
สีพื้นหลัง: #eef;
-

3.3 คุณสามารถเพิ่มตัวเลือกหลัง :host-context เพื่อเลือกองค์ประกอบย่อย

ตัวอย่างเช่น :host-context h1 ค้นหาแท็ก h1 ภายในมุมมองส่วนประกอบ

 : โฮสต์บริบท h1 {
สี：ชมพูสุดฮอต;
-

3.4 สามารถใช้ตัดสินสภาพภายในของรูปแบบใดรูปแบบหนึ่งได้

 h1{
สี：ชมพูสุดฮอต;

:โฮสต์บริบท(.active) &{
สี: สีเหลือง;
-
-