0

我有Observable关于实体状态的信息。我需要在对话框窗口中显示信息（角度材料mat-dialog）。数据源是 Web 套接字，我不确定在用户打开对话框窗口之前是否检索到所有数据。换句话说，我应该根据 observable 更新对话窗口内容。

所以我需要了解如何将Observable值作为输入参数传递到 mat 对话框（即作为普通组件输入的异步管道）。

我知道可以使用dialogRef和手动更新data对象，但是对于反应式 anguar 世界来说有点奇怪

4

1 回答 1

1

我为您创建了一个非常简单的示例，poller.service 将接收并存储数据，然后对话框组件可以订阅该数据。

@Component({
  selector: 'confirmation-dialog',
  templateUrl: 'confirmation-dialog.html',
})
export class ConfirmationDialog {
  message: string = "Are you sure?"
  confirmButtonText = "Yes"
  cancelButtonText = "Cancel"
  dataSub: any;

  constructor(
    @Inject(MAT_DIALOG_DATA) private data: any,
    private pollerService: PollerService,
    private dialogRef: MatDialogRef<ConfirmationDialog>
  ) {

    this.dataSub = this.pollerService.data.subscribe((data: any) => this.message = data)


    if(data) {
      this.message = data.message || this.message;

      if (data.buttonText) {
        this.confirmButtonText = data.buttonText.ok || this.confirmButtonText;
        this.cancelButtonText = data.buttonText.cancel || this.cancelButtonText;
      }
    }
  }

  onConfirmClick(): void {
    this.dialogRef.close(true);
  }

}

@Injectable()
export class PollerService {

  data: BehaviorSubject<string> = new BehaviorSubject('123');
  array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
  constructor() { 

 
    for(var i = 0; i < this.array.length; i++) {
      this.delay(i)
    }
  }


  delay(i: number) {
    setTimeout(() => {
      console.log(this.array[i])
      this.data.next('I am some data changing ' + i)
    }, 1000 * i);
  }

}

https://stackblitz.com/edit/mat-dialog-example-yta2ir?file=app%2Fconfirmation-dialog.component.ts

于 2022-01-24T10:28:57.150 回答