Question

我正在使用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>

Answer 1

您可以使用[innerHTML]属性：

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

，而不是 \ n \ n ，请使用html br标签。

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>`} });

Answer 2

尝试：

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

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

Answer 3

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

但是我建议Christian Benseler's answer！

Answer 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',

};

在MatDialog Content Angular 7中添加新行

4 个答案: