问如何将数据从模态传递到调用角分量？
EN

Stack Overflow用户

提问于 2020-06-19 09:00:18

回答 2查看 984关注 0票数 0

callingmodal.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传递给callingmodal.component.ts。

如何将这些参数传递给callingmodal.component.ts？

angular

angular-material

modal-dialog

angular-forms

mat-dialog

腾讯云OCR文字识别特惠

文字识别限时抢购，热门产品低至14.9元

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-06-19 09:37:20

我假设您是在动态地从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钩子中订阅以捕获所有推送通知到可观测值。

callingmodal.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();
  }
}

Stack Overflow用户

发布于 2020-06-19 09:26:38

将以下构造添加到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 );
});