ใช้อย่างไรและที่ไหน :: ng-deep?

ฉันยังใหม่กับ Angular 4 ดังนั้นใครก็ได้โปรดอธิบายวิธีใช้และสถานที่ที่จะใช้ ::ng-deepใน Angular 4 ได้บ้าง

อันที่จริงฉันต้องการเขียนทับคุณสมบัติ CSS บางส่วนของส่วนประกอบลูกจากส่วนประกอบหลัก นอกจากนี้ยังรองรับ IE11?

โดยปกติแล้ว /deep/ “shadow-piercing”Combinator สามารถใช้เพื่อบังคับสไตล์ลงไปchild componentsได้ ตัวเลือกนี้มีนามแฝง >>> และตอนนี้มีอีกชื่อหนึ่งว่า :: ng-deep

เนื่องจาก/deep/ combinatorเลิกใช้งานแล้วขอแนะนำให้ใช้::ng-deep

ตัวอย่างเช่น:

<div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent( 'DETAILS')"></div>

และ css

.overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

จะถูกนำไปใช้กับส่วนประกอบย่อย

การใช้งาน

::ng-deep, >>>และ/deep/ห่อหุ้มมุมมองปิดการใช้งานสำหรับกฎ CSS เฉพาะในคำอื่น ๆ ก็ช่วยให้คุณเข้าถึงองค์ประกอบ DOM ซึ่งไม่ได้อยู่ในองค์ประกอบของ HTML ตัวอย่างเช่นหากคุณใช้ Angular Material (หรือไลบรารีของบุคคลที่สามอื่น ๆ เช่นนี้) องค์ประกอบที่สร้างขึ้นบางส่วนอยู่นอกพื้นที่ของส่วนประกอบของคุณ (เช่นกล่องโต้ตอบ ) และคุณไม่สามารถเข้าถึงองค์ประกอบเหล่านั้นได้โดยตรงหรือใช้ CSS ปกติ ทาง. หากคุณต้องการเปลี่ยนรูปแบบขององค์ประกอบเหล่านั้นคุณสามารถใช้สิ่งใดสิ่งหนึ่งจากสามสิ่งเหล่านี้ตัวอย่างเช่น

::ng-deep .mat-dialog {
  /* styles here */
}

ในตอนนี้ทีม Angular ขอแนะนำให้ทำการปรับแต่งแบบ "ลึก"ด้วยการห่อหุ้มมุมมองEMULATEDเท่านั้น

การเลิกจ้าง

การปรับแต่งแบบ "ลึก"ก็เลิกใช้งานไปแล้วเช่นกันแต่ตอนนี้ก็ยังใช้งานได้เนื่องจาก Angular ให้การสนับสนุนก่อนการประมวลผล (อย่าเพิ่งรีบปฏิเสธ::ng-deepในวันนี้ลองดูแนวทางการเลิกใช้งานก่อน)

อย่างไรก็ตามก่อนที่จะทำตามวิธีนี้ฉันขอแนะนำให้คุณดูที่การปิดใช้งานวิธีการห่อหุ้มมุมมอง (ซึ่งไม่เหมาะเช่นกันมันทำให้สไตล์ของคุณรั่วไหลไปสู่ส่วนประกอบอื่น ๆ ) แต่ในบางกรณีก็เป็นวิธีที่ดีกว่า หากคุณตัดสินใจที่จะปิดใช้งานการห่อหุ้มมุมมองขอแนะนำอย่างยิ่งให้ใช้คลาสเฉพาะเพื่อหลีกเลี่ยงการตัดกันของกฎ CSS และสุดท้ายหลีกเลี่ยงความยุ่งเหยิงในสไตล์ชีตของคุณ มันง่ายมากที่จะปิดการใช้งานใน.tsไฟล์ของคอมโพเนนต์:

@Component({
  selector: '',
  template: '',
  styles: [''],
  encapsulation: ViewEncapsulation.None  // Use to disable CSS Encapsulation for this component
})

คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับการห่อหุ้มมุมมองในนี้บทความ

ฉันจะเน้นความสำคัญของการ จำกัด::ng-deepเฉพาะชายด์ของส่วนประกอบโดยกำหนดให้พาเรนต์เป็นคลาส css ที่ห่อหุ้ม

เพื่อให้ใช้งานได้สิ่งสำคัญคือต้องใช้::ng-deepafter the parent ไม่ใช่ก่อนหน้านี้มิฉะนั้นจะใช้กับคลาสทั้งหมดที่มีชื่อเดียวกันในขณะที่โหลดส่วนประกอบ

ส่วนประกอบ css:

.my-component ::ng-deep .mat-checkbox-layout {
    background-color: aqua;
}

แม่แบบส่วนประกอบ:

<h1 class="my-component">
    <mat-checkbox ....></mat-checkbox>
</h1>

ผลลัพธ์ (สร้างเชิงมุม) css:

.my-component[_ngcontent-c1] .mat-checkbox-layout {
    background-color: aqua;
}

แก้ไข:

คุณสามารถบรรลุพฤติกรรมเดียวกันได้โดยใช้:hostคำสำคัญแทนการสร้างคลาส css ใหม่

:host ::ng-deep .mat-checkbox-layout

ตรวจสอบให้แน่ใจว่าไม่พลาดคำอธิบายของ:host-contextซึ่งเป็นตรงเหนือ::ng-deepในคู่มือเชิงมุม: https://angular.io/guide/component-styles ฉันพลาดมาจนถึงตอนนี้และหวังว่าจะได้เห็นเร็ว ๆ นี้

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

ตัวอย่างเช่นฉันมี<h1>ส่วนหัวสีดำภายในส่วนประกอบที่ฉันออกแบบและฉันต้องการความสามารถในการเปลี่ยนเป็นสีขาวเมื่อแสดงบนพื้นหลังที่มีธีมสีเข้ม

หากฉันไม่สามารถเข้าถึงแหล่งที่มาฉันอาจต้องทำสิ่งนี้ใน css สำหรับผู้ปกครอง:

.theme-dark widget-box ::ng-deep h1 { color: white; }

แต่:host-contextคุณสามารถทำสิ่งนี้ภายในส่วนประกอบแทนได้

 h1 
 {
     color: black;       // default color

     :host-context(.theme-dark) &
     {
         color: white;   // color for dark-theme
     }

     // OR set an attribute 'outside' with [attr.theme]="'dark'"

     :host-context([theme='dark']) &
     {
         color: white;   // color for dark-theme
     }
 }

สิ่งนี้จะดูที่ใดก็ได้ในห่วงโซ่ส่วนประกอบสำหรับ.theme-darkและใช้ css กับ h1 หากพบ นี่เป็นทางเลือกที่ดีในการพึ่งพามากเกินไป::ng-deepซึ่งในขณะที่ความจำเป็นมักจะเป็นการต่อต้านรูปแบบ

ในกรณีนี้&จะถูกแทนที่ด้วยh1(นั่นคือวิธีการทำงานของ sass / scss) เพื่อให้คุณสามารถกำหนด css 'ปกติ' และธีม / ทางเลือกที่อยู่ติดกันซึ่งมีประโยชน์มาก

:ระวังจะได้รับหมายเลขที่ถูกต้องของ เพราะ::ng-deepมีสองและ:host-contextหนึ่งเดียว

เพียงแค่อัปเดต:

คุณควรใช้::ng-deepแทน/deep/สิ่งที่ดูเหมือนจะเลิกใช้แล้ว

ตามเอกสาร:

Combinator ลูกหลานที่เจาะด้วยเงาถูกเลิกใช้งานและการสนับสนุนจะถูกลบออกจากเบราว์เซอร์และเครื่องมือหลัก ๆ ดังนั้นเราจึงวางแผนที่จะลดการสนับสนุนใน Angular (สำหรับทั้ง 3 ของ / deep /, >>> และ :: ng-deep) ถึงเวลานั้น :: ควรเลือก ng-deep เพื่อให้เข้ากันได้กับเครื่องมือที่กว้างขึ้น

คุณสามารถค้นหาได้ที่นี่

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

<mat-toolbar #subbar>
...
</mat-toolbar>

export class BypartSubBarComponent implements AfterViewInit {
  @ViewChild('subbar', { static: false }) subbar: MatToolbar;
  constructor(
    private renderer: Renderer2) { }
  ngAfterViewInit() {
    this.renderer.setStyle(
      this.subbar._elementRef.nativeElement, 'backgroundColor', 'red');
  }

}