在 matTooltip 等动态内容上应用模块化 css

Question

在 angular 组件中，我正在创建工具提示：

@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}']
})

这两种解决方案均无效，我希望有解决此问题的方法，并且更好的方法是在 angular material 的工具提示中添加格式化的 HTML。

Answer 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
})

最后，如果上述 none 选项有效，请尝试通过 matTooltipClass 输入向工具提示添加自定义 class：

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

应该向工具提示添加 prewrap class，然后您可以尝试设置样式。

这是我能提供的最好的了。

在 matTooltip 等动态内容上应用模块化 css

Applying modular css on dynamic content like matTooltip

angular-material

angular-components

angular