Элемент PrimeNG Element, не облагороженный, не может быть создан по умолчанию Angular 2 ViewEncapsulation (Emulated)

Я пытаюсь использовать свойство styleUrls при объявлении моего компонента Angular 2, чтобы воспользоваться View Encapsulation, но, похоже, быть проблемой, когда элементы вставляются в DOM после того, как Angular имеет завершенную инициализацию.

Моя ситуация с PrimeNG paginator, которую я сейчас не умею стилизовать, так как она не получает область применения Angular.

См. ниже элемент <p-datatable> имеет область видимости (она существовала в исходной разметке), но <p-paginator> не добавляется в DOM после факта.

введите описание изображения здесь

Поэтому стиль, вставленный Angular в HEAD, не соответствует моим элементам:

<style>
    p-datatable[_ngcontent-xnm-4] p-paginator[_ngcontent-xnm-4]:not(:first-child) {
    display: none;
}
</style>

Является ли это ограничением инкапсуляции представления в Angular 2 или существует ли способ "повторно использовать" DOM по требованию?

отредактирован для опечатки и уточненного названия

Ответы

Ответ 1

Как вы заметили, это связано с Shadow DOM и областью определения стиля. Ваш шаблон содержит только p-datatable, который корректно получает область видимости, но его дочерние элементы, которые добавляются после этого факта, не охвачены. Чтобы применить свой стиль, вы можете выбрать два подхода.

Решение 1 - Специальные селектор (рекомендуется)

Я лично рекомендую это, так как вы все еще можете поддерживать инкапсуляцию просмотров (Shadow DOM). Мы можем настроить таргетинг на наши шаблоны уровня компонентов, которые используют PrimeNG с помощью :host и /deep/ selectors как таковой

:host /deep/ .ui-paginator-bottom {
  display: none;
}

То, что это делает, - это заставить стиль вниз через дочернее дерево компонентов во всех представлениях дочерних компонентов, поэтому, хотя p-datatable является единственным тегом, присутствующим в вашем собственном шаблоне вашего компонента, стиль будет по-прежнему применяться, поскольку он является child к компоненту в DOM.

Решение 2 - Отключить инкапсуляцию просмотра

На уровне компонента вы можете отключить View Encapsulation, установив его в ViewEncapsulation.None as such

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

@Component {
...
encapsulation: ViewEncapsulation.None,
}