В Angular 7 - Как мне стилизовать HTML, спроецированный с использованием ng-контента - PullRequest
Новая
       19

В Angular 7 - Как мне стилизовать HTML, спроецированный с использованием ng-контента

0 голосов
/ 12 мая 2019

В Angular 7 - Как стиль HTML, который проецируется с использованием ng-контента.

Технология : Angular 7, Angular CLI, SASS, HTML5, Webpack.

Мой код:

Примечание : html моего компонента с включением / проекцией.Этот компонент имеет файл scss, и html, который проходит через ng-контент, может быть стилизован только при использовании ng-deep, например: host :: ng-deep 

<table>
  <ng-content></ng-content>
</table>

Это мой sassдля вышеупомянутых компонентов html: 

:host::ng-deep {
  table {
    background-color: map-get($theme-brand, flat);
    display: flex;
    flex-direction: column;
    border: 1px solid map-get($theme-contrast, contrast-8);
    border-radius: 5px;

    tr {
      display: flex;
      justify-content: flex-end;
    }

    th, td {
      @extend %p-2;
      word-break: break-all;
      align-items: center;
      display: flex;
      text-align: right;
      width: 250px;
      color: map-get($theme-typography-color, regular);

      &:first-child {
        text-align: left;
        border: none;
        width: 100%;
      }
    }
  }
}

Примечание : Таким образом, вышеупомянутые CSS для tr и th, td не будут стилизованы из-за проекции, препятствующей стилизации, если яиспользуйте ng-deep.

Вещи пробовали :

  • ng-deep (который работает, но не хочет использовать его как устаревший браузерами).

1 Ответ

0 голосов
/ 12 мая 2019

Согласно этому вопросу , у вас есть два разных подхода:

1: используйте псевдо-селектор :: slotted , который начинает поддерживаться новыми браузерами. Чтобы использовать это, вам нужно изменить encapsulation свойство @Component на ViewEncapsulation.ShadowDom.

2: Подход с использованием грубой силы, который устанавливает для свойства encapsulation @Component значение ViewEncapsulation.None. Таким образом, стиль будет применен ко всей странице, без обработки Angular.

Подробнее о ViewEncapuslation можно узнать здесь: https://angular.io/api/core/ViewEncapsulation

Существует также обсуждение в Github об этом.

...