Dùng gì thay cho :: ng-deep

Tôi đang cố tạo kiểu cho một phần tử được đặt bởi đầu ra bộ định tuyến theo góc cạnh và muốn đảm bảo rằng phần tử được tạo có chiều rộng là 100%

Từ hầu hết các câu trả lời, tôi thấy rằng tôi nên sử dụng ::ng-deepbộ chọn, nhưng từ tài liệu của Angular, nó không được dùng nữa. Có một thay thế cho ::ng-deep?

FWIW Trong nghiên cứu của mình, tôi không tìm thấy bất kỳ sự thay thế nào cho ng-deep hoặc các lựa chọn thay thế áp dụng khác. Điều này là do, tôi tin rằng, nhóm Angular đang trì hoãn thông số W3C trên bóng dom, ban đầu có các bộ chọn như deep. Tuy nhiên, W3c kể từ đó đã loại bỏ khuyến nghị, nhưng không thay thế nó bằng một khuyến nghị mới. Cho đến khi điều đó xảy ra, tôi tưởng tượng rằng nhóm Angular sẽ giữ lại ::ng-deepvà có sẵn các giải pháp thay thế, nhưng ở trạng thái không được dùng nữa do các bản nháp của W3C đang chờ xử lý. Tôi không thể dành thời gian để tìm tài liệu để sao lưu điều này ngay bây giờ nhưng tôi đã thấy nó gần đây.

Tóm lại: Hãy tiếp tục sử dụng ::ng-deepvà các lựa chọn thay thế cho đến khi tạo ra một sản phẩm thay thế - việc ngừng sử dụng chỉ là thông báo sớm để mọi người không bị che mắt bất cứ khi nào thay đổi thực sự xảy ra.

- CẬP NHẬT -

https://drafts.csswg.org/css-scoping-1/ Đây là bản nháp đề xuất nếu bạn quan tâm. Có vẻ như họ đang làm việc trên một tập hợp các bộ chọn mạnh mẽ cho các phần tử trong cây dom bóng; đó là thông số kỹ thuật này, một khi được chấp thuận, mà tôi nghĩ sẽ thông báo cho bản sao góc cạnh, nếu thậm chí có một bản sao (tức là góc cạnh có thể không cần triển khai các bộ chọn của riêng chúng khi nó hoạt động trong trình duyệt).

Để bỏ qua lỗi không được dùng nữa ::ng-deep, tôi thường tắt ViewEncapsulation. Mặc dù đây không phải là cách tiếp cận tốt nhất, nhưng nó đã phục vụ tôi rất tốt.

Để tắt ViewEncapsulation, hãy làm như sau trong thành phần của bạn:

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

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

export class HeaderComponent {

}

Điều này sẽ làm cho các kiểu .scss trong thành phần này chung cho toàn bộ ứng dụng. Để không cho phép các kiểu đi lên chuỗi tới các thành phần chính và anh chị em, hãy bao bọc toàn bộ phạm vi bằng bộ chọn như sau:

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

Bây giờ, các kiểu được chỉ định ở đây sẽ đi xuống các thành phần con, vì vậy bạn phải đặc biệt hơn với các bộ chọn css của mình và lưu ý đến chữ p và q của bạn khi thêm CSS (có thể thêm bộ chọn con được chỉ định trong ứng dụng Angular của bạn và sau đó là các kiểu của nó).

Tôi nói đó không phải là cách tiếp cận tốt nhất vì đoạn trên, nhưng điều này đã phục vụ tôi rất tốt.

Cách thay thế đơn giản và dễ dàng cho kiểu sâu là kiểu phổ biến sử dụng bộ chọn phần tử của thành phần mẹ. Vì vậy, nếu bạn có điều này trong hero-details.component.css:

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

Nó sẽ trở thành điều này trong styles.css:

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

Về cơ bản, một phong cách sâu sắc là một phong cách không được đóng gói nên về mặt khái niệm, nó có vẻ giống một phong cách chung hơn là một phong cách thành phần. Cá nhân tôi sẽ không sử dụng phong cách sâu sắc nữa. Các thay đổi đột phá là bình thường trong các bản cập nhật phiên bản lớn và việc loại bỏ tính năng không dùng nữa là một trò chơi công bằng.

Như ai đó đã nói trước đây, nếu bạn đang sử dụng thư viện của bên thứ ba thì hầu như không thể tránh khỏi việc thỉnh thoảng phải sử dụng ::ng-deepmột lần. Nhưng bạn sẽ làm gì với các dự án trước đây của mình khi dự án ::ng-deepkhông còn được hỗ trợ bởi các trình duyệt?

Để sẵn sàng cho khoảnh khắc đó, tôi sẽ đề xuất những điều sau:

1. Sử dụng ViewEncapsulation.None một cách khôn ngoan. Điều này được dịch là chỉ dành cho những thành phần cần truy cập các thành phần sâu hơn.

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

2. Bây giờ, để tránh va chạm và sự kỳ lạ của CSS, bạn nên (theo quy tắc) luôn bao bọc mẫu thành phần của bạn bằng một lớp. Vì vậy, example.component.html sẽ giống như sau:

<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. Một lần nữa, theo quy tắc, dòng đầu tiên của mỗi tệp SCSS sẽ nhắm mục tiêu vùng chứa thành phần. Vì không có Encapsulation nên bạn có thể sửa đổi thành phần của bên thứ ba bằng cách nhắm mục tiêu các lớp của chúng. Điều đó nói rằng, example.component.scss sẽ giống như:

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

Đây không phải là sự thay thế chung cho :: ng-deep, nhưng dành cho trường hợp sử dụng được tác giả câu hỏi mô tả:

Trong trường hợp đặc biệt khi bạn muốn tạo kiểu cho phần tử được chèn bởi bộ định tuyến-đầu ra, có một giải pháp thanh lịch là sử dụng bộ chọn lân cận liền kề trong CSS:

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

Điều này sẽ áp dụng cho tất cả các phần tử là hàng xóm trực tiếp của bộ định tuyến-ổ cắm.

Đọc thêm:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet

Để tránh thay đổi cách đóng gói mặc định, tôi đã viết một trình trợ giúp nối các kiểu chung cho thành phần:

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;
       }
    `]);
  }
}

kết quả:

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

Bạn có thể sử dụng "/ deep /". Đó là :: ng-deep thay thế.

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