Как передать данные из модального окна в вызывающий компонент angular?

Question

callmodal.component.ts

export class CallingmodalComponent implements OnInit {
    openDialog(): void {
        const dialogRef = this.dialog.open(SharemodalComponent, {
          width: '640px', disableClose: true
        });
        console.log(dialogRef);

      }
}

sharemodalComponent.component.ts

export class SharemodalComponent implements OnInit {
  onaddCus(): void {
    console.log(this.sharingWith);
    console.log(this.addCusForm.value.selectedPermissionType);
  }
}

Я звоню одним нажатием кнопки onaddCus () . В этой функции я хочу передать this.sharingWith и this.addCusForm.value.selectedPermissionType в callmodal.component.ts.

Как передать эти параметры в callmodal.component.ts?

Answer 1

Я предполагаю, что вы динамически создаете sharemodalComponent из callingmodal. В этом случае вы можете обмениваться данными между ними с помощью одноэлементной службы . Попробуйте следующее

shared.service.ts

@Injectable({providedIn: 'root'})
export class SharedService {
  private _sharingWithSource = new BehaviorSubject<any>(null);
  private _selectedPermissionTypeSource = new BehaviorSubject<any>(null);
  
  public sharingWith$ = this._sharingWithSource.asObservable();
  public selectedPermissionType$ = this._selectedPermissionTypeSource.asObservable();

  set sharingWithSource(value: any) {
    this._sharingWithSource.next(value);
  }

  set selectedPermissionTypeSource(value: any) {
    this._selectedPermissionTypeSource.next(value);
  }
}

sharemodalComponent.component.ts

export class SharemodalComponent implements OnInit {
  constructor(private sharedService: SharedService) { }
  
  onaddCus(): void {
    this.sharedService.sharingWithSource = this.sharingWith;
    this.sharedService.selectedPermissionTypeSource = this.addCusForm.value.selectedPermissionType;
    console.log(this.sharingWith);
    console.log(this.addCusForm.value.selectedPermissionType);
  }
}

И в вызывающем модальном компоненте подпишитесь в ngOnInit для захвата всех отправленных уведомлений в наблюдаемые.

callmodal.component.ts

export class CallingmodalComponent implements OnInit, OnDestroy {
  completed$ = new Subject<any>();

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.sharedService.sharingWith$.pipe(
      takeUntil(this.completed$)
    ).subscribe(
      value => {
        if (value) {           // <-- default value is `null`
          this.sharingWith = value 
        }
      }
    );
 
    this.sharedService.selectedPermissionType$.pipe(
      takeUntil(this.completed$)
    ).subscribe(
      value => {
        if (value) { 
          this.selectedPermissionType = value 
        }
      }
    );
  }

  openDialog(): void {
    const dialogRef = this.dialog.open(SharemodalComponent, {
      width: '640px', disableClose: true
    });
    console.log(dialogRef);
  }

  ngOnDestroy() {
    this.completed$.next();           // <-- close the observables
    this.completed$.complete();
  }
}

Обновление - объяснение

1. Rx JS BehaviorSubject - вариант наблюдаемого многоадресного приема Rx JS Subject. Он может удерживать переданные ему текущие данные и отправлять их сразу после подписки. По этой причине для этого требуется начальное значение (здесь мы используем null), и мы проверяем, прежде чем присвоить значение.

2. next метод объекта поведения используется для pu sh новое значение наблюдаемого. Другие допустимые методы для уведомлений pu sh: error и complete. Нажатие на error вызовет обратный вызов ошибки в наблюдателе, а вызов complete завершит наблюдаемый поток.

3. Всякий раз, когда задействована подписка, возникает потенциальная утечка памяти из открытого / Незакрытые подписки. Так что всегда полезно закрывать подписки в компоненте с помощью хука OnDestroy. Один из способов - присвоить подписку локальной переменной и вызвать для нее unsubscribe(). Другой элегантный способ - использовать оператор Rx JS takeUntil. Подробнее об этом подходе здесь .

4. Здесь - хорошее объяснение от основного члена команды Rx JS о том, когда используйте функцию asObservable().

Answer 2

Добавьте следующую конструкцию в свой SharemodalComponent:

constructor(@Inject(MAT_DIALOG_DATA) public data: any,
            public dialogRef: MatDialogRef<SharemodalComponent>) {}

И затем вы можете передать данные из своего CallingmodalComponent и подписаться на событие закрытия:

const dialogRef = this.dialog.open(SharemodalComponent, {
      width: '640px', disableClose: true,
      data: { sharingWith: '100px', ... }
});

dialogRef.afterClosed().subscribe(result => {
  console.log(result );
});

Если вы нажмете свой кнопку, вы можете закрыть Dialoag и передать данные вашему CallingmodalComponent:

this.dialogRef.close('some data here');