Angular 9 SCSS不只适用于自定义标签的子标签。

我正在努力开发我自己的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.scss

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

谁有个主意?

解决方案:

我找到了为什么没有应用的原因。

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.像这样。

标签.组件.scss

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

你可以用 ::ng-deep 像这样。

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

与mixin的工作,以及这样的。

: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);
    }
}

给TA打赏
共{{data.count}}人
人已打赏
未分类

当一个函数位于另一个文件夹中的另一个c程序中时,如何使用gdb ddebugger进入该函数?

2022-9-9 6:25:21

未分类

类型错误:类型为'NoneType'的对象没有len(),在我的python代码中。

2022-9-9 6:36:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索