สิ่งที่ใช้แทน :: ng-deep

ฉันกำลังพยายามจัดรูปแบบองค์ประกอบที่วางโดยเต้าเสียบเราเตอร์ในเชิงมุมและต้องการให้แน่ใจว่าองค์ประกอบที่สร้างขึ้นมีความกว้าง 100%

จากคำตอบส่วนใหญ่ฉันเห็นว่าฉันควรใช้::ng-deepตัวเลือก แต่จากเอกสารของ Angular มันกำลังถูกเลิกใช้ มีทางเลือกให้::ng-deepหรือไม่?

FWIW ในการวิจัยของฉันฉันไม่พบการทดแทน ng-deep หรือทางเลือกอื่นที่เกี่ยวข้อง นี่เป็นเพราะฉันเชื่อว่าทีม Angular กำลังคล้อยตามข้อกำหนด W3C บน shadow dom ซึ่งในตอนแรกมีตัวเลือกเช่นdeep. อย่างไรก็ตาม W3c ได้ลบคำแนะนำออกไปแล้ว แต่ไม่ได้แทนที่ด้วยคำแนะนำใหม่ จนกว่าจะเป็นเช่นนั้นฉันคิดว่าทีม Angular จะคงไว้::ng-deepและเป็นทางเลือกอื่นที่พร้อมใช้งาน แต่อยู่ในสถานะเลิกใช้งานเนื่องจากสถานะรอการร่างของ W3C ฉันไม่สามารถใช้เวลาในการค้นหาเอกสารเพื่อสำรองข้อมูลนี้ได้ในขณะนี้ แต่เพิ่งเห็นเมื่อเร็ว ๆ นี้

เรื่องสั้นขนาดยาว: ใช้ต่อไป::ng-deepและทางเลือกอื่น ๆ จนกว่าจะมีการสร้างสิ่งทดแทน - การเลิกใช้งานเป็นเพียงการแจ้งให้ทราบล่วงหน้าเพื่อไม่ให้ผู้คนตาบอดเมื่อใดก็ตามที่การเปลี่ยนแปลงเกิดขึ้นจริง

- อัพเดท -

https://drafts.csswg.org/css-scoping-1/ นี่คือร่างข้อเสนอหากคุณสนใจ ดูเหมือนว่าพวกเขากำลังทำงานกับชุดตัวเลือกที่แข็งแกร่งสำหรับองค์ประกอบภายใน Shadow Dom Tree มันเป็นข้อมูลจำเพาะนี้เมื่อได้รับการอนุมัติแล้วฉันคิดว่าจะแจ้งให้โคลนเชิงมุมทราบหากมีอยู่ (เช่นเชิงมุมอาจไม่จำเป็นต้องใช้ตัวเลือกของตัวเองเมื่อสิ่งนี้ใช้งานได้ในเบราว์เซอร์)

ที่จะหลีกเลี่ยงเลิกผมมักจะปิดการใช้งาน::ng-deep ViewEncapsulationแม้ว่านี่จะไม่ใช่แนวทางที่ดีที่สุด แต่ก็ให้บริการฉันได้ดี

หากต้องการปิดใช้งานViewEncapsulationให้ทำดังต่อไปนี้ในคอมโพเนนต์ของคุณ:

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class HeaderComponent {

}

สิ่งนี้จะทำให้รูปแบบ. scss ในคอมโพเนนต์นี้เป็นสากลสำหรับแอปพลิเคชันทั้งหมด ในการไม่อนุญาตให้สไตล์ขึ้นไปบน chain ไปยังส่วนประกอบหลักและพี่น้องให้ห่อ scss ทั้งหมดด้วยตัวเลือกดังนี้:

app-header {
  // your styles here and any child component styles can go here
}

ตอนนี้สไตล์ที่ระบุไว้ที่นี่จะลงไปที่ส่วนประกอบลูก ๆ ดังนั้นคุณต้องเจาะจงเป็นพิเศษกับตัวเลือก css ของคุณและคำนึงถึง p และ q ของคุณเมื่อเพิ่ม CSS (อาจเพิ่มตัวเลือกลูกที่ระบุในแอป Angular ของคุณแล้วตามด้วยสไตล์)

ฉันบอกว่ามันไม่ใช่แนวทางที่ดีที่สุดเนื่องจากย่อหน้าข้างบน แต่สิ่งนี้ให้บริการฉันได้ดี

ทางเลือกที่ง่ายและสะดวกสำหรับสไตล์ลึกคือสไตล์ทั่วไปโดยใช้ตัวเลือกองค์ประกอบขององค์ประกอบหลัก ดังนั้นหากคุณมีสิ่งนี้ใน hero-details.component.css:

:host ::ng-deep h3 {
  font-style: italic;
}

มันจะกลายเป็นสิ่งนี้ใน styles.css:

app-hero-details h3 {
  font-style: italic;
}

โดยพื้นฐานแล้วสไตล์ลึกเป็นสไตล์ที่ไม่มีการห่อหุ้มดังนั้นในแนวความคิดจึงดูเหมือนสไตล์ทั่วไปสำหรับฉันมากกว่าสไตล์ส่วนประกอบ โดยส่วนตัวฉันจะไม่ใช้รูปแบบที่ลึกอีกต่อไป การเปลี่ยนแปลงการทำลายเป็นเรื่องปกติในการอัปเดตเวอร์ชันหลักและการลบคุณลักษณะที่เลิกใช้แล้วถือเป็นเกมที่ยุติธรรม

ตามที่มีคนระบุไว้ก่อนหน้านี้หากคุณกำลังใช้ไลบรารีของบุคคลที่สามแทบจะเป็นไปไม่ได้เลยที่จะหลีกเลี่ยงการใช้::ng-deepนาน ๆ ครั้ง แต่คุณจะทำอย่างไรกับโครงการก่อนหน้านี้เมื่อ::ng-deepเบราว์เซอร์ไม่รองรับอีกต่อไป

เพื่อให้พร้อมสำหรับช่วงเวลานั้นฉันจะแนะนำสิ่งต่อไปนี้:

1. ใช้ViewEncapsulation ไม่มีอย่างชาญฉลาด ซึ่งแปลว่าสำหรับส่วนประกอบที่ต้องการเข้าถึงส่วนประกอบที่ลึกกว่าเท่านั้น

@Component({
      selector: 'app-example',
      templateUrl: './example.component.html',
      styleUrls: ['./example.component.scss'],
      encapsulation: ViewEncapsulation.None
    })

2. ตอนนี้เพื่อหลีกเลี่ยงการชนและ CSS ความแปลกประหลาดที่คุณควร (เป็นกฎ) เสมอห่อแม่แบบส่วนประกอบของคุณกับชั้นเรียน ดังนั้น example.component.html ควรเป็นดังนี้:

<section class="app-example-container">
<!-- a third party component -->
<mat-tab-group>
<mat-tab label="First"></mat-tab>
<mat-tab label="Second"></mat-tab>
</mat-tab-group>
</section>

3. อีกครั้งตามกฎแล้วบรรทัดแรกของไฟล์ SCSS ทุกไฟล์จะกำหนดเป้าหมายไปที่คอนเทนเนอร์คอมโพเนนต์ เนื่องจากไม่มีEncapsulationคุณจึงสามารถปรับเปลี่ยนองค์ประกอบของบุคคลที่สามได้โดยกำหนดเป้าหมายชั้นเรียน ที่กล่าวว่าexample.component.scssควรเป็นดังนี้:

.app-example-container {
/* All the CSS code goes here */
.mat-tab-group .mat-tab-label {color: red;}
}

นี่ไม่ใช่การแทนที่ทั่วไปสำหรับ :: ng-deep แต่สำหรับกรณีการใช้งานที่อธิบายโดยผู้เขียนคำถาม:

ในกรณีพิเศษที่คุณต้องการจัดรูปแบบองค์ประกอบที่แทรกด้วยเราเตอร์เต้าเสียบมีวิธีแก้ปัญหาที่สวยงามโดยใช้ตัวเลือกเพื่อนบ้านที่อยู่ติดกันใน CSS:

router-outlet+* {
  /* styling here... */
}

สิ่งนี้จะใช้กับองค์ประกอบทั้งหมดที่เป็นเพื่อนบ้านโดยตรงของเราเตอร์เต้าเสียบ

อ่านเพิ่มเติม:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet

เพื่อหลีกเลี่ยงการเปลี่ยนการห่อหุ้มเริ่มต้นฉันเขียนตัวช่วยที่ต่อท้ายสไตล์ส่วนกลางสำหรับส่วนประกอบ:

deepStyle.ts

import { ViewContainerRef } from '@angular/core';

export function deepStyle(vcr: ViewContainerRef, csss: string[]){
    let id = 'deep-' + vcr.element.nativeElement.tagName;
    let styleElement = document.getElementById('pierce-' + vcr.element.nativeElement.name);
    if(!styleElement){
        styleElement = document.createElement('style');
        styleElement.id = id;
        styleElement.innerHTML = csss.map(css => vcr.element.nativeElement.tagName + ' ' + css).join('\n');
        document.head.append(styleElement);
    }
}

my-component.ts

import { Component, ViewContainerRef } from '@angular/core';
import { deepStyle } from '../deepStyle';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {
   constructor(vcr: ViewContainerRef) {
    deepStyle(vcr, [`
       img {
         height: 180px;
       }
    `]);
  }
}

ผลลัพธ์:

<head>
...
<style id="deep-MY-COMPONENT">
    MY-COMPONENT img {
      height: 180px;
    }
</style>
...
</head>

คุณสามารถใช้ "/ deep /" มัน :: ทางเลือกที่ลึกซึ้ง

:host /deep/ h3 {
  font-style: italic;
}