在MatDialog Content Angular 7中添加新行 [英] Adding a new line in MatDialog Content Angular 7

问题描述

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

I am using MatDialog and trying to add a new line in the content definition. Both \n and </b> are not doing it. Is there another way without having to manually go into the html and change it since it's a reusable component:

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>

推荐答案

您可以使用[innerHTML]属性:

You can use the [innerHTML] property:

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

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

and instead of \n\n, use the html br tag.

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

这篇关于在MatDialog Content Angular 7中添加新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！