折行工具提示 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;
}

- Helene

---

你能提供一个 stackblitz 吗？white-space: pre 的解决方案对我有效。 - Tim Martens

我不知道为什么在Stackblitz上无法获取工具提示，这里是链接：https://stackblitz.com/edit/angular-apnthv?file=src%2Fapp%2Fapp.component.html - Helene

Answer 1

以下是使用您的标记/代码的示例（可正常工作）- stackblitz

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

编辑：以下内容适用于组件样式表

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

文档建议使用::ng-deep已经被弃用，但最新版本仍然可用。

- camden_kid

---

我曾经遇到过同样的问题，但实际上包含 ::ng-deep 使它不起作用。在我的 styles.css 中声明该类即可解决问题，我使用的是 Angular 7。 - Niel

感谢您纠正 Angular Material 工具提示 :-) - Andre Elrico

使用Angular 8无法正常工作。我已经尝试过使用::ng-deep和不使用它。我已经尝试过将CSS包含在样式和组件中，并使用!important标志。 - beanwa

在 Angular 8 中使用 ::ng-deep 对我有效。 - Meqwz

另外，我将 getMoreInformations() 方法转换为自定义管道，因为从模板文件调用方法会对性能产生不良影响。 - Meqwz

Answer 2

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

仍在使用 Angular 10 进行开发

- Le Bail Florent