Диалоговые окна никогда не вызывали у меня интереса к моим предыдущим ограниченным сторонним проектам веб-разработки, тот факт, что я никогда не видел их использования, является одной из причин, и всегда есть надежный вызов Alert, который выполняет ту работу, которую я требую. Модальные блоки Bootstrap интересны, но у них не было времени, чтобы по-настоящему в них погрузиться. Затем появился шанс изучить Angular.
Я играю с Angular и Angular Material почти 2 месяца. Буквально в прошлом месяце они буквально сломали меня, взломав некоторые из моих кодов с его последней версией. Не начинай упоминать о флексе, я не могу осмыслить это. Но в этой структуре есть то, что вы любите и ненавидите. Во-первых, легко понять реализацию диалоговых окон Angular Material.
У меня были годы работы, полагаясь на окна сообщений Windows для оповещения обо всем. Простой звонок и легкий результат. Вот код C # для отображения окна сообщения.
string message = "Do you want to abort this operation?";
string title = "Close Window";
MessageBoxButtons buttons = MessageBoxButtons.AbortRetryIgnore;
DialogResult result = MessageBox.Show(message, title, buttons,
MessageBoxIcon.Warning);
О, я скучаю по WinForms, но все должно продолжаться. Итак, я попытался имитировать стиль вызова в Angular, чтобы отобразить настраиваемое поле оповещения. Вот мой пример вызова для отображения окна предупреждения.
MessageBox.show(this.dialog, this.message, this.title,
this.information, this.button,
this.allow_outside_click, this.style,
this.width)
.subscribe( result => {
console.log(result);
});
MessageBox.show(this.dialog, `The result is : ${response}`);
MessageBox.show(this.dialog, `Hello, World!`);
Вот моя реализация. Возможно, это не самый элегантный или самый эффективный подход, но он дает мне то, что мне нужно. Кстати, исходный код доступен на GitHub
Компонент
Я создал один компонент для пользовательского интерфейса MessageBox. Он имеет два доступных стиля: полный и простой. Элементы пользовательского интерфейса показаны ниже.
Варианты конфигурации:
- Заголовок - отображаемый текст в строке заголовка диалогового окна. По умолчанию используется значение «Alert», если не указано иное. Строка заголовка отображается, только если для стиля установлено значение «Полный».
- Сообщение - основное сообщение, которое будет показано пользователю.
- Информация - необязательная дополнительная информация для отображения.
- Кнопки - типы отображаемых кнопок. В настоящее время поддерживается только следующее: OK, OK / CANCEL, YES / NO, ACCEPT / REJECT.
- Разрешить щелчок снаружи для закрытия - разрешить пользователям просто щелкать любую область на экране за пределами диалогового окна, чтобы закрыть его. По умолчанию пользователям необходимо нажимать кнопки, чтобы начать закрытие.
- Стиль - определяет стиль диалогового окна. Он поддерживает два стиля: полный и простой.
- Ширина - ширина диалогового окна.
Компонент DialogBox не имеет сложной логики. Он предназначен для отображения сообщения и возврата ответа пользователя. Когда пользователь нажимает кнопку, закройте пользовательский интерфейс и верните результат.
onOk() {
this.dialogRef.close({result: "ok"});
}
onCancel() {
this.dialogRef.close({result: "cancel"});
}
Статический класс MessageBox
Я использовал статический класс для имитации вызова C #. Сервис, должно быть, был лучшей реализацией, но я выбрал более простой. Единственная проблема, с которой я столкнулся с этим подходом, заключается в том, что статический класс не может использовать преимущества внедрения зависимостей, поэтому вы заметите, что я должен передать объект MatDialog в качестве параметра.
export class MessageBox {
static show(dialog: MatDialog, message, title = "Alert",
information = "", button = 0,
allow_outside_click = false,
style = 0, width = "200px") {
const dialogRef = dialog.open( SimpleDialogComponent, {
data: {
title: title || "Alert",
message: message,
information: information,
button: button || 0,
style: style || 0,
allow_outside_click: allow_outside_click || false
},
width: width
});
return dialogRef.afterClosed();
}
}
Обратите внимание, что ответ возвращается как Observable. Потребитель этого класса должен подписаться, чтобы получить фактический ответ.
Служба сообщений
В некоторых случаях моему приложению требуется служба сообщений для запуска моего диалогового окна. Обычно это используется для отображения сообщения в результате завершения процесса из другой службы. Вот простой сервис сообщений для выполнения этой работы.
@Injectable()
export class MessageService {
private message = new Subject<any>();
constructor() { }
// the type can be used in case you want to classify the alert
sendMessage(message: string, type = 1) {
this.message.next({text: message, type: type});
}
getMessage(): Observable<any> {
return this.message.asObservable();
}
clearMessage() {
this.message.next();
}
}
Как использовать MessageBox
Мы можем просто вызвать метод MessageBox.show () прямо в вашем коде.
MessageBox.show(this.dialog, this.message, this.title,
this.information, this.button,
this.allow_outside_click, this.style,
this.width)
.subscribe( result => {
console.log(result);
});
Или, если вы хотите использовать службу сообщений.
onSendService() {
this.messageService.sendMessage(this.message);
}
Просто убедитесь, что вы подписались на услугу.
this.subscriber = this.messageService.getMessage()
.subscribe(message => {
MessageBox.show(this.dialog, message.text);
});
Если у вас есть комментарии или предложения по поводу решения, не стесняйтесь нажимать поле для комментариев. Удачного кодирования!
Это сообщение было обновлено 11 декабря 2017 г. и добавлена реализация службы сообщений.
Эта статья также размещена в моем личном блоге.
Если этот пост в любом случае вам помог, нажмите кнопку хлопка 👏 несколько раз ниже, чтобы выразить свою поддержку!
