在 matTooltip 等动态内容上应用模块化 CSS答案

【问题标题】：Applying modular css on dynamic content like matTooltip在 matTooltip 等动态内容上应用模块化 CSS
【发布时间】：2018-07-14 20:11:22
【问题描述】：

在一个角度组件中，我正在创建一个工具提示：

@Component({
    selector: 'my-selector',
    templateUrl: './column-edit.template.html',
    styleUrls: ['./column-edit.style.scss']
})
export class myclass {
  public dateFormatTooltip = "This and this \n and that as well";
}

在column-edit.template.html 我有这个：

<i class="fa fa-info" 
[matTooltip]="dateFormatTooltip" 
matTooltipPosition="after" 
matTooltipHideDelay="999999">
</i>

在column-edit.style.scss 我有这个：

:host {
    .mat-tooltip {
        white-space: pre-line;
    }
}

这里的问题是这个 css 没有被应用到 .mat-tooltip 元素，因为它是动态的，在呈现 HTML 时该元素不存在。我用谷歌搜索，发现这个问题一直是reported before，我尝试了几个解决方案，但都没有奏效：

我尝试使用/deep/，尽管它已被弃用，只是为了看看我是否走在正确的道路上：

:host /deep/ {
    .mat-tooltip {
        white-space: pre-line;
    }
}

我还尝试将 css 直接添加到组件中，而不是添加到 scss 文件中：

@Component({
    selector: 'my-selector',
    templateUrl: './column-edit.template.html',
    styles: ['.mat-tooltip {white-space: pre-line}']
})

这两种解决方案都不起作用，我希望有一个解决方法，以及更好的方法来在角度材料的工具提示中添加格式化的 HTML。

【问题讨论】：

标签： angular angular-material angular-components

【解决方案1】：

我不知道答案，但我会尝试以下方法：

删除:host 选择器，这样就可以了：

.mat-tooltip {
    white-space: pre-line;
}

不过，您可能已经尝试过了。

下一个选项 - 尝试移除视图封装：

import { ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-selector',
    templateUrl: './column-edit.template.html',
    styles: ['.mat-tooltip {white-space: pre-line}'],
    encapsulation: ViewEncapsulation.None
})

最后，如果上述选项都不起作用，请尝试通过 matTooltipClass 输入向工具提示添加自定义类：

<i class="fa fa-info" 
    [matTooltip]="dateFormatTooltip"
    [matTooltipClass]="{'prewrap': true}"
    [matTooltipPosition]="after"
    [matTooltipHideDelay]="3000">
</i>

这应该在工具提示中添加一个prewrap 类，然后您可以尝试样式化。

这是我能提供的最好的。

【讨论】：