如何在 Angular 管道输出中添加换行符答案

【问题标题】：how to add line break in Angular pipe output如何在 Angular 管道输出中添加换行符
【发布时间】：2020-07-20 05:20:11
【问题描述】：

如何使用 Angular 管道添加换行符

<th>{{(date | date: 'EEE MMM d')}}</th>

这个输出就像 Mon Jul 20 - 都在同一行。但我希望它像这样分开：

周一
七月
20

在同一个单元格但在不同的行。就像添加 <br> 标签一样。请查看下图：

【问题讨论】：

标签： angular pipe

【解决方案1】：

<th>
  {{(date | date: 'EEE')}}<br/>
  <strong>{{(date | date: 'MMM')}}</strong><br/>
  {{(date | date: 'd')}}
</th>

【讨论】：

有效但性能？如果你有 100 列怎么办

【解决方案2】：

我的第一个解决方案也是创建一个管道：

@Pipe({name: 'breakOn'})
export class BreakOnPipe implements PipeTransform {
  transform(value: string, ...args: any[]) {
    return value.replace(/,|;/g, '<br>'); //replace all ',' and ';' with <br>
  }

}

类似于@Davis Jahn 的回答。但这只是在我的表中显示<br>，并没有实际的换行符。原因是字符串被“转义”了。 解决方案：

<td mat-cell *matCellDef="let row"><span innerHtml="{{ row.value | breakOn }}"></span></td>

<td> 似乎不支持“innerHtml”，但<span> 支持。

【讨论】：

我同意，但[innerHtml]="row.value | breakOn" 不是更好吗？

【解决方案3】：

您实际上可以尝试实现一个定义新行的管道。

类似这样的：

@Pipe({ Name: 'addLine' })
Export class addLinePipe implements PipeTransform {
  transform(value: string, args: string[]): any {
      return value.replace(/(?:\r\n|\r|\n)/g, '<br/>');
  }
}

然后在其他管道之间调用它：

<th>
  {{date | date: 'EEE')}}
  {{foo | addLine}}
  {{date | date: 'MMM')}}
  {{foo | addLine}}
  {{date | date: 'd')}}
</th>

【讨论】：

这只是将“
/”添加为字符串
@dermoritz 这正是 OP 想要的。问题是“如何使用角管道添加换行符”添加带有角管道的
-tag（br = 换行符；来源：MDN web docs）正是如此。
我添加了一个答案。使用您的解决方案，您只会在表格中看到
。