在 MatDialog Content Angular 7 中添加新行答案

【问题标题】：Adding a new line in MatDialog Content Angular 7在 MatDialog Content Angular 7 中添加新行
【发布时间】：2019-04-12 13:36:20
【问题描述】：

我正在使用 MatDialog 并尝试在内容定义中添加新行。 \n 和 </b> 都没有这样做。由于它是可重用组件，因此是否有另一种方法而无需手动进入 html 并对其进行更改：

var status: MatDialogRef<GenericDialogComponent> this.dialog.open(GenericDialogComponent,{
     width: '400px',
    data: {title: "Sample Title?", content: "Document " + this.docID + " has been saved. The users email address is provied below:\n\n"+this.email+"</b>"} });

HTML

<h1 mat-dialog-title>{{data.title}}</h1>
<div mat-dialog-content>
  <p>{{data.content}}</p>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="Cancel()">Cancel</button>
  <button mat-button (click)="Ok()" cdkFocusInitial>Ok</button>
</div>

【问题讨论】：

简单
也不起作用？我假设它不需要 HTML
不，它不起作用，它确实需要 html

标签： javascript angular angular-material

【解决方案1】：

您可以使用 [innerHTML] 属性：

<p [innerHTML]="data.content"></p>

使用 html br 标签代替 \n\n。

const status: MatDialogRef<GenericDialogComponent> this.dialog.open(GenericDialogComponent,{
     width: '400px',
    data: {title: "Sample Title?", content: `Document ${this.docID} has been saved. The users email address is provied below:<br /><b>${this.email+}</b>`} });

【讨论】：

是否将</br> 放在引号中，例如'next line </b>'，因为它仍然没有这样做，但仍在调试，谢谢
你为什么使用而没有打开？
@Flash 我已经用正确的内容字符串（使用模板字符串）更新了我的答案。
太奇怪了是因为我没有开场白吗？用@TimVns 回答没有它也能工作？

【解决方案2】：

如果您需要/想要使用\n，请尝试使用<pre> HTML tag。

但我建议Christian Benseler's answer！

【讨论】：

【解决方案3】：

试试：

<div mat-dialog-content [innerHtml]="'<p>' + data.content + '</p>'">

编辑 @Christian Benseler 的回答更好/更漂亮。

【讨论】：

不是innerHtml，是innerHTML
其实没关系。

【解决方案4】：

如果其他人在点击此答案时发现它很有用，出于我的需要，我已从 Building a reusable dialog module with Angular Material 复制了通用对话框和服务的配置

并且通过使用先前的答案，其中 HTML <br/> 被设置到代码中的字符串中，我使用管道将其分开（在其他显示需求中也很有用），当然这假设对话框只是做一个小显示的数据量没有显示整本书的章节;-)

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'newlineToBR',
})
export class NewlineToBRPipe implements PipeTransform {
  transform(value: string): string {
    return value.replace(/\n/g, '<br/>');
  }
}

在通用对话框组件中：

<div mat-dialog-content>
      <p class="dialog-message" [innerHTML]="data.message | newlineToBR"></p>
    </div>

然后在调用对话框的组件中，没有 HTML 标签，只需确保在编辑器中添加换行符并使用正确的引号类型：

const options = {
title: 'Confirm De-select of Review Required',
message: `If you select OK then all the following fields will be reset:
- start date
- assigned person`,
cancelText: 'CANCEL',
confirmText: 'OK',

};

【讨论】：

【解决方案5】：

这对我有用：

        let warningMessages = ['message1','message2','message3'];

        const config=  {
            panelClass:'msg-dialog-container',
            data: {
                type:WARNNING,
                showConfirm:true,
                message: warningMessages
            }};

【讨论】：