Как и где использовать :: 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после родителя, а не раньше, иначе он будет применяться ко всем классам с тем же именем в момент загрузки компонента.

Компонент css:

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

Шаблон компонента:

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

Результирующий (сгенерированный на Angular) 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 (для всех трех из / 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');
  }

}