11

我正在尝试将样式应用于 Angular 2 应用程序中的 ngbTooltip 组件。我将指令应用为:

<div [ngbTooltip]="tooltipText">
    Element text
</div>

但是由于 Angular 2 应用了样式范围,我不能直接.tooltip在我的组件模板中设置类的样式。

如何为这个特定组件的工具提示提供自定义样式?

编辑:

我有一个附加到我的组件的 scss 样式表。我的风格(简化)是:

.license-circle {
    width: 10px;
    ... other styles
}

/deep/ .tooltip {
    &.in {
        opacity: 1;
    }
}

但是我渲染的样式看起来像:

<style>
.license-circle[_ngcontent-uvi-11] {
  width: 10px; }

.tooltip.in {
  opacity: 1; }
</style>

这让我相信工具提示样式是未封装的(而不是仅仅刺穿这个组件的子组件。

注意:我试过:host >>> .tooltip了,但没有用,所以我最终使用了/deep/.

谢谢!

4

2 回答 2

10

如评论中所述,选择器应以:host

:host .license-circle {
    width: 10px;
    ... other styles
}

:host /deep/ .tooltip {
    &.in {
        opacity: 1;
    }
}
于 2016-09-27T17:30:23.407 回答
2

对于 Angular 版本 8.3,建议使用 ::ng-deep

::host .license-circle {
  width: 10px;
  ... other styles
}

:host ::ng-deep .tooltip {
  &.in {
    opacity: 1;
  }
}

我们需要记住的一件事是 ::ng-deep、/deep/ & >>> 在 Angular 9 中已被弃用。因此,在这一点上找到其他一些长期解决方案将是一件好事。查看文档了解更多信息。

于 2019-10-03T06:01:45.250 回答