Angular 9 / S CSS не применяется только для дочернего элемента пользовательского тега - PullRequest
Новая
       6

Angular 9 / S CSS не применяется только для дочернего элемента пользовательского тега

0 голосов
/ 24 апреля 2020

Я пытаюсь работать с собственной библиотекой angular, которая была совместима с Angular 4. Моя цель - сделать ее совместимой с Angular 9. По какой-то причине css не применяется для дочерний компонент. Этот компонент является последним вложенным компонентом.

HTML вывод 

<ui-label _ngcontent-nln-c13="" _nghost-nln-c12="" ng-reflect-label="test">
    <span _ngcontent-nln-c12="">test</span>
</ui-label>

label.component.s css

foo-label {
  //font-style: italic; //<-- works here :/
  > span{
    font-style: italic; //<-- not applied
  }
}

У кого-то есть идея?

1 Ответ

0 голосов
/ 24 апреля 2020

Я нашел, почему это не применяется. Это связано с компонентом области действия.

foo-label был обернут foo-tag следующим образом: 

<foo-tag _ngcontent-han-c14="" _nghost-han-c13="" ng-reflect-label="test" ng-reflect-hlevel="1">
    <h1 _ngcontent-han-c13="">
        <foo-label _ngcontent-han-c13="" _nghost-han-c12="" ng-reflect-label="test">
             <span _ngcontent-han-c12="">test</span>
        </foo-label>
    </h1>
</foo-tag>

И стиль был написан в tag.component.scss. как это:

tag.component.s css

:host{
    > h1 {
        > foo-label { //<--applied css until here !
           > span {
             ...
           }
        }
    }
}

Вы можете исправить с помощью ::ng-deep вот так: 

:host{
    > h1 {
        ::ng-deep > foo-label {
           > span {
             ...
           }
        }
    }
}

Работает с миксином так же, как это: 

:host{
    > h1 {
        @include h($light-color, $title-header-size, $application-toolbar-icon-size);
    }
}

@mixin h($text-color, $font-size, $size-img){
    margin-top: 0;
    margin-bottom: 0;
    flex-shrink: 0;
    white-space: nowrap;
    ::ng-deep > foo-label {
        @include label($text-color, $font-size, $size-img);
    }
}
...