Блог

Прямо сейчас на моей странице редактирования пользователь может удалить раздел и подраздел, но я подумываю о добавлении диалогового окна подтверждения, чтобы пользователь случайно не удалил ни один из них.

Я не совсем уверен, как я могу передавать данные между компонентом диалогового окна подтверждения и компонентом страницы редактирования.

Проект не будет выполняться на Stackblitz, но я загрузил эти два компонента здесь https://stackblitz.com/edit/angular-ivy-ztepf6?file=Edit Компонент/EditComponent.ts

поэтому я буду очень признателен, если кто-нибудь сможет это проверить и сможет мне помочь. Спасибо

Редактировать Component.TS

 this is how I open Comfirmation Dialog

  openSection() {
    let dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: {
        isSection: true, isSubsection: false
      },
    }
    );
  }
  openSubsection(){
      this.dialog.open(ConfirmDialogComponent, {
        data: {
          isSubsection: true, isSection: false
        },
      });
  }

//This is how I'm deleting right now without confirmation Dialog
  delete(sec) {
    if (this.isSection) {
      this.HelpService.deleteHelpSection(sec.id).subscribe(() => {
        const index = this.mappedSections.findIndex((value) => value.id == sec.id);
        this.mappedSections = this.mappedSections.filter(section => section.id != sec.id)
        if (~index) {
          this.HelpService.deleteHelpSubsection(sec.id).subscribe(() => {
            this.mappedSections = this.mappedSections.filter(section => section.id != sec.id);
          })
        }
      })
    } if (this.isSubsection) {
      this.HelpService.deleteHelpSubsection(sec.id).subscribe(() => {
        const index = this.mappedSections.findIndex((value) => value.id == sec.parentId);
        if (~index) {
          this.mappedSections[index].subSections = this.mappedSections[index].subSections.filter((subsection) => subsection.id != sec.id)
        }
      })
    }
  }
  

подпишитесь на результат из модального.

  openSection() {
    let dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: {
        isSection: true, isSubsection: false
      },
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed', result);
      if(result){
         this.delete(sec)
      }
    });
  }
  

из модального компонента передать данные

   <button mat-raised-button (click)="closeDialog()">Close</button>
  

 constructor(
    public dialogRef: MatDialogRef<ConfirmDialogComponent>
  ) {}  
  closeDialog() {
    this.dialogRef.close(true);
  }
  

проверьте этот рабочий пример
https://stackblitz.com/edit/angular-pd7vt6?file=src/app/dialog-elements-example.ts