断线工具提示 angular material

Question

我想知道是否有人知道如何在 angular material 组件中跳转一行 "tooltip"

这是我的代码：

HTML :

<mat-icon 
   [matTooltip]="getMoreInformations()"
   matTooltipPosition="left">
   myIcon
</mat-icon>

TS :

getMoreInformations(): string {
   return 'Adress : ' + this.person.adress
      + ' \n  Tel : ' +  this.person.tel;
   }

\n 和 br 不工作（都试过了）

还尝试像这样添加一个 matTooltipClass：

HTML :

<mat-icon...
  matTooltipClass="test"
...

CSS :

.test {
  white-space: pre-line;
}

Answer 1

这是一个使用您的 markup/code 的示例（效果很好）- stackblitz

为了让 CSS 起作用，我必须将 class 放在文件 styles.css 中，而不是组件样式表中。这取自 willshowell 对此问题的评论 - https://github.com/angular/material2/issues/8316

编辑：组件样式表中的以下内容

::ng-deep .test {
  white-space: pre-line;
}

documentation 表明 ::ng-deep 已弃用，但它仍然适用于最新版本。

Answer 2

::ng-deep <tootltipCLassName>{
white-space: pre-line;
}

仍在使用 angular 10

Break line tooltip angular material