Добавление новой строки в MatDialog Content Angular 7
Я использую 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
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Пытаться:
<div mat-dialog-content [innerHtml] = "'<p>' + data.content + '</p>'">
РЕДАКТИРОВАТЬ Ответ @Christian Benseler лучше/красивее.
Это не innerHtml, это innerHTML
На самом деле это не имеет значения.
Вы можете использовать свойство [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>`} });
идет ли </br> в кавычки, как 'next line </b>', потому что он все еще не делает этого, но все еще отлаживает спасибо
Почему вы используете </b> без открывающего <b>?
@Flash Я обновил свой ответ текущей строкой содержимого (используя строку шаблона).
это так странно, потому что у меня не было открытия? с ответом @TimVns это сработало без него?
Попробуйте использовать <pre> HTML-тег, если вам нужно/хотите использовать \n.
Но я бы предложил Ответ Кристиана Бенселера !
На случай, если другие сочтут это полезным при нажатии на этот ответ, для своих нужд я скопировал конфигурацию общего диалога и службы из Создание повторно используемого диалогового модуля с помощью 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',
};
Это сработало для меня:
let warningMessages = ['message1','message2','message3'];
const config= {
panelClass:'msg-dialog-container',
data: {
type:WARNNING,
showConfirm:true,
message: warningMessages
}};
Простой <br> тоже не работает? Я предполагаю, что это не требует HTML