Angular2 材质工具提示 - 未添加类答案

【问题标题】：Angular2 Material Tooltips - Class is not being addedAngular2 材质工具提示 - 未添加类
【发布时间】：2018-01-11 09:06:31
【问题描述】：

我有以下component.html：

<tr>
 <td>
   <span matTooltipClass="primary-tooltip" matTooltipPosition="above" matTooltipHideDelay="100000" matTooltip="{{cert.awsCertId}}"><p style="overflow:hidden;text-overflow: ellipsis;max-width:120px">{{cert.awsCertId}}</p></span>
  </td>
</tr>

在我的 component.scss 中：

.primary-tooltip {
  min-width: 300px;
  background-color: #FC5558;
}

根据docs，这应该在材质工具提示中添加一个自定义类，但我没有看到正在应用的样式。我是不是搞错了？有没有其他方法可以将样式应用于工具提示？

【问题讨论】：

正如@yurzui 所说，您应该将样式放在通用样式表中，而不是放在组件css中。

标签： angular material-design angular-material

【解决方案1】：

将您的样式放在一个通用样式表中

Stackblitz Example

或在您的组件上将encapsulation 设置为ViewEncapsulation.None：

@Component({
 selector: '...',
 template: '...',
 encapsulation: ViewEncapsulation.None,
 styles: [`
   .primary-tooltip {
      min-width: 300px;
      background-color: #FC5558;
   }
`]
})
export class Component {}

Stackblitz example

【讨论】：

将样式添加到常见的 scss 中有效。你能解释一下吗？
Angular 为在封装为 Emulated（默认）时在组件元数据中声明的样式添加前缀
类似.primary-tooltip[_ngcontent-c3] 但是具有primary-tooltip的div位于组件模板之外并且没有_ngcontent-c3属性
为我工作。谢谢

【解决方案2】：

你不能使用类 direclty 因为它呈现为一个影子 dom。通过使用主机，您可以更改影子 dom 的 css

:host /deep/ .primary-tooltip {
 min-width: 300px;
  background-color: #FC5558;
}

【讨论】：

谢谢。仅当组件不提供类似于 ngClass 的内容时才需要这样做。但是材质工具提示提供了matTooltipClass，我们可以使用它来应用样式。