Question

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

@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。

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

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

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

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

这是我能提供的最好的。

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

1 个答案: