0

调用modal.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。

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

4

2 回答 2

1

我假设您是sharemodalComponent从callingmodal. 在这种情况下，您可以使用单例服务在它们之间共享数据。尝试以下

共享服务.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钩子以捕获所有推送到可观察对象的通知。

调用modal.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. RxJS BehaviorSubject- 多播可观察 RxJS 的变体Subject。它可以保存推送给它的当前数据，并在订阅时立即发出。这就是它需要一个初始值（我们null在这里使用）并且我们在分配值之前检查的原因。

  2. next行为主体的方法用于将新值推送到可观察对象。推送通知的其他有效方法是error和complete。推送到error将调用观察者中的错误回调，调用complete将完成可观察流。

  3. 每当涉及订阅时，打开/未关闭的订阅都会存在潜在的内存泄漏。因此，在它的OnDestroy钩子中关闭组件中的订阅总是一个好习惯。一种方法是将订阅分配给局部变量并调用unsubscribe()它。其他优雅的方式是使用 RxJStakeUntil操作符。有关此方法的更多信息，请点击此处。

  4. 这是 RxJS 团队的核心成员关于何时使用asObservable()函数的一个很好的解释。

于 2020-06-19T17:37:20.190 回答
0

将以下构造添加到您的 SharemodalComponent：

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

而且您可以从 CallingmodalComponent 传递数据并订阅 close 事件：

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

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

如果单击按钮，则可以关闭对话框并将数据传递给 CallingmodalComponent：

this.dialogRef.close('some data here');
于 2020-06-19T17:26:38.010 回答