Angular Tooltip 无法识别“\r”或“\n”字符答案

【问题标题】：Angular Tooltip does not recognize '\r' or '\n' charactersAngular Tooltip 无法识别“\r”或“\n”字符
【发布时间】：2019-06-09 16:55:36
【问题描述】：

所以要概述用例：从我的后端服务中，我收到一个对象列表，我使用 ngFor 将其拆分并使用 .我在这张卡片上附加了一个工具提示，以显示有关该项目的信息。每个项目的信息是一个元素列表。对于工具提示，我将列表发送到一个函数并使用 '\r\n' 字符加入列表中的项目，但是工具提示根本不读取字符，只是在工具提示中显示一个连续的字符串

<div *ngFor="let item of itemList; ">
 <mat-card matTooltip="{{getDesc(item)}}">
    <span class="card-title" style="font-size: 12px">
      {{ item.itemName }}
    </span>
 </mat-card>
</div>

toolTip描述功能：

getDesc(item){
  let itemDesc: any;
  if(item.itemDescList !== null)
    itemDesc = item.itemDescList.join('\r\n')
  return itemDesc
}

如何在工具提示中引入这些换行符？

示例数组：[ 'desc 1 : some text', 'desc 2: some text', ...] 这些需要在工具提示的新行中显示

【问题讨论】：

不需要使用
抱歉怎么办？我会像介绍新系列一样介绍它吗？
使用 .join('
) 将其作为文字字符引入工具提示字符串
angular 2 material matTooltip multiline的可能重复
我之前看到过，但它在空格处添加了换行符。我的 desc 字符串数组中有空格。所以我需要换行符是数组索引而不是空格

标签： html angular typescript

【解决方案1】：

这个post已经回答了。

首先，创建一个将添加white-space: pre-line 样式的类。将其放入您的 styles.scss 文件或其他根级 css 文件中；如果你想将它放在组件的样式表中，请在类前加上 ::ng-deep:

// in root stylesheet
.line-broken-tooltip {
  white-space: pre-line;
}
// in component's stylesheet
::ng-deep .line-broken-tooltip {
  white-space: pre-line;
}

然后使用matTooltipClass 输入添加类。

要对其进行测试，您可以在要拆分的部分之间添加换行符 &#13;：

<mat-card    
    matTooltip="One line&#13;Two line"
    matTooltipClass="line-broken-tooltip">
</mat-card>

或

this.tooltipText = 'One line&#13;Two line';

<mat-card    
    [matTooltip]="tooltipText"
    matTooltipClass="line-broken-tooltip">
</mat-card>

要在不明确说明分隔符的情况下对其进行测试，请改用模板字符串，以便保留换行符：

this.tooltipText = `
  This value has been updated.
  Confidence: ${this.confidence}
`;

<p    
   [matTooltip]="tooltipText"
    matTooltipClass="line-broken-tooltip">
A02.0 - Salmonella enteritis 
</p>

【讨论】：

这对我不起作用（我已经尝试在这里做同样的事情：stackblitz.com/angular/…）
@Edwin ，您需要分叉 stackblitz 示例并保存您的更改。您发布的链接将我带到一个没有我提到的解决方案的项目，因此我无法为您提供帮助。
在 Angular 9 项目中，我必须在样式表条目前面加上 ::ng-deep 才能使其工作。
它对我也不起作用:(
Артур Гудиев，你有 stackblitz 的例子吗？或者，要查看一些代码？

【解决方案2】：

角度 8/9

对于Angular 8/9，以下解决方案（使用::ng-deep）对我有用，

::ng-deep {
 .mat-tooltip-class-here {
  white-space: pre-line;
 }
}

<span    
    matTooltip="First line \n Second line"
    matTooltipClass="mat-tooltip-class-here">
</span>

【讨论】：

【解决方案3】：

您可以添加以下 CSS

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

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

<div>
without white-space: pre-line; 
some text with spaces
and 
newlines
<div>




<div class="with-pre-line">
with white-space: pre-line;
some text with spaces
and 
newlines only breaks
on newlines
<div>

【讨论】：

这不是只适用于空格吗？我的数组看起来像这样 ['desc 1: this', 'desc 2: that'] 所以在空白处添加新行是行不通的。 Desc 1 和 desc 2 需要在各自的线路上
我添加了一个示例 pre-line 仅在换行符处换行而不是所有空格，除非需要，以阻止文本比容器长。
添加到我的卡。它在卡片和他们的元素之间添加了空格，但工具提示不受影响......
我认为问题不在于换行符，而在于工具提示本身。我尝试引入 whitespace: pre-line 但它根本不影响工具提示
我使用了 ::ng-deep 并且能够解决我的问题我知道它已被弃用，但这是唯一有效的解决方案。如此处所述：stackoverflow.com/questions/47058483/…

【解决方案4】：

使用<br />。

要使用 Angular 将 HTML 插入标签，请使用：<span class="card-title" style="font-size: 12px" [innerHTML]="item.itemName"></span>

【讨论】：

如何将 innerHTML 应用到 matTooltip
要明确工具提示生成为 [matTooltip]='someString' 我如何在此处引入 [innerHTML]？
您无法将 innerHTML 添加到 mat 工具提示