Як і де використовувати :: ng-deep?

Я новачок у Angular 4, тож хтось може пояснити, як і де використовувати ::ng-deepв Angular 4?

Насправді я хочу переписати деякі властивості CSS дочірніх компонентів з батьківських компонентів. Більше того, чи підтримується це на IE11?

Зазвичай /deep/ “shadow-piercing”комбінатор можна використовувати для змушення стилю 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 рекомендує робити "глибокі" маніпуляції лише за допомогою ЕМУЛЬТОВАНОЇ інкапсуляції подання.

ЗНИЖЕННЯ

"глибокі" маніпуляції насправді теж застаріли , АЛЕ поки що вони все ще працюють, тому що Angular підтримує попередню обробку (не поспішайте відмовляти ::ng-deepсьогодні, спочатку погляньте на практики припинення ).

У будь-якому випадку, перед тим, як слідувати цим способом, я рекомендую вам поглянути на вимкнення підходу інкапсуляції подання (що теж не ідеально, це дозволяє вашим стилям просочуватися в інші компоненти), але в деяких випадках це кращий спосіб. Якщо ви вирішили вимкнути інкапсуляцію подання, настійно рекомендуємо використовувати певні класи, щоб уникнути перетину правил CSS, і нарешті, уникайте безладу у ваших таблицях стилів. Це дуже просто відключити прямо у .tsфайлі компонента :

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

Ви можете знайти більше інформації про інкапсуляцію подання в цій статті.

Я б наголосив на важливості обмеження ::ng-deep лише дочірніми компонентами компонента, вимагаючи від батьків бути інкапсульованим класом css.

Щоб це працювало, важливо використовувати ::ng-deep after після батьківського, а не раніше, інакше це стосувалося б усіх класів з однаковим ім'ям у момент завантаження компонента.

Компонент 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/якого, здається, застаріле.

За документацією:

Комбінатор нащадків, що пронизує тінь, не підтримується, а підтримка видаляється з основних браузерів та інструментів. Таким чином, ми плануємо відмовитись від підтримки в 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');
  }

}