Question

我想将动态计数器数据发送到Angular Material中的Mat对话框，以便在Mat对话框中增加计数。但是，发送到Mat Dialog的数据是静态的。如何在Mat对话框中动态更新数据？

Answer 1

您可以查看RxJs库，或者只查看Angular团队中这个简单的OVERVIEW。需要您注意的主要部分是Subject和BehaviorSubject（我根据您的情况选择最后一个）。主要思想是创建一个observable，您可以在不同的组件中多次订阅，当值发生变化时，您将获得所有订阅中的更新值。这是一个相当简单的示例，我在服务中创建了BehaviorSubject，在两个组件中订阅了它，并且每隔一秒更新一次值，并且正如预期的那样，这两个组件获得更新的值：STACKBLITZ。

具有可观察性的简单服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { timeInterval } from 'rxjs/operators';

@Injectable()
export class DataService {
  source$ = new BehaviorSubject<number>(0);

  constructor() {
    setInterval(() => {
      const newVal = this.source$.getValue() + 1;
      this.source$.next(newVal);
    }, 1000);
  }

  public getObservable() {
    return this.source$.asObservable();
  }
}

以下是您可以订阅更改的方式：

constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    private _dataService: DataService) {
      _dataService.getObservable().subscribe(val => this.counter = val);
    }

Angular材质中Mat对话框内的计时器

1 个答案: