在 MatDialog Content Angular 7 中添加新行 [英] Adding a new line in MatDialog Content Angular 7
本文介绍了在 MatDialog Content Angular 7 中添加新行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 MatDialog 并尝试在内容定义中添加新行.\n
和 都没有这样做.有没有另一种方法而不必手动进入 html 并更改它,因为它是一个可重用的组件:
var status: MatDialogRefthis.dialog.open(GenericDialogComponent,{宽度:'400px',data: {title: "Sample Title?", content: "Document " + this.docID + " 已保存.用户邮箱地址如下:\n\n"+this.email+"</b>"} });
HTML
{{data.title}}
<div mat-dialog-content><p>{{data.content}}</p>
<div mat-dialog-actions><button mat-button (click)="Cancel()">Cancel</button><button mat-button (click)="Ok()" cdkFocusInitial>Ok</button>
解决方案
您可以使用 [innerHTML] 属性:
<p [innerHTML]="data.content"></p>
而不是 \n\n,使用 html br 标签.
const status: MatDialogRefthis.dialog.open(GenericDialogComponent,{宽度:'400px',data: {title: "Sample Title?", content: `Document ${this.docID} 已保存.用户电子邮件地址提供如下:<br/><b>${this.email+}</b>`} });
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>
解决方案
You can use the [innerHTML] property:
<p [innerHTML]="data.content"></p>
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屋!
查看全文