Разработайте стандартную службу диалоговых окон, используя Angular 7

Question

Я работаю над Angular 7 и ищу разработку общего компонента или службы для отображения Оповещений / диалоговых окон при подтверждении / удалении пользователем подробностей о нажатии кнопки.

Я перешел по ссылке: https://firstclassjs.com/create-a-reusable-confirmation-dialog-in-angular-7-using-angular-material/ и в Интернете я обнаружил, что многие люди используют Angular Material способ реализации.

Есть ли простой способ динамически передать title and message для оповещения службыили компонент, основанный на выполняемом вами действии типа «Обновить / Удалить»?

Кто-нибудь может поделиться примером кода для того же ??

Answer 1

Я предполагаю, что вы переходите по предоставленной вами ссылке.

• добавьте новую услугу, такую ​​как confirmDialogService
• Служба будет иметь наблюдаемую форму, такую ​​как openDialog$: Subject<{title: string, message: string}> = new Subject<{title: string, message: string}>();
• Служба будет иметь метод с именем openConfimDialog(string message, string title) { this.openDialog$.next({title, message}) };
• Внедрить эту службу в App.Component и подписаться на openDialog $, затем внутри вызова подписки openDialog() метод по предоставленной вами ссылке, а также передать сообщение и заголовок в диалог
• Внедрите службу в нужный вам компонент и вызовите openConfirmDialog

, и в этот момент вы увидите, что диалоговое окно будет открыто.

Следующий шаг -получить, если пользователь подтверждает или отменяет диалоговое окно.

используйте тот же шаблон, чтобы иметь еще один наблюдаемый afterClosed$ в обслуживании и метод для вызова notifyDialogClosed

, теперь на этот раз вызов notifyDialogClosed изapp.component и подпишитесь на afterClosed$ в вашем компоненте, просто не забудьте отписаться

Если вы создадите стек по той ссылке, которую вы предоставили, я могу помочь вам в остальном

Answer 2

В app.component.ts вам нужно расширить openDialog() следующим образом:

openDialog(title: string, message: string): void {
    this.title = title;
    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
      width: '350px',
      data: message,
    });
    dialogRef.afterClosed().subscribe(result => {
      if(result) {
        console.log('Yes clicked');
        // DO SOMETHING
      }
    });
  }

И расширить ( app.component.html ) какэто:

<button mat-button (click)="openDialog('I am the Title', 'I am the content-message ')">Confirm box</button>

Удачи!