Question

我将这样的数据加载到服务中：

employees: Observable<Employee[]>;

private loadEmployees() {
    this.employees = this.db.collection('Employees').snapshotChanges().pipe(
        map(changes => changes.map(a => {
            const employee = a.payload.doc.data() as Employee;
            employee.id = a.payload.doc.id;

            return employee;
        }))
    )
}

我想在多个组件中订阅employees。像这样：

this.businessService.employees.subscribe(
  (employees) => {
    this.employees = employees;
  }
);

但是它只能在第一次使用。当我导航到另一个组件并再次执行相同操作时，它将不起作用。如何多次订阅Oberservable？

或者是直接在我的服务中订阅的最佳方式，如下所示：

employees: Employee[];

private loadEmployees() {
    this.db.collection('Employees').snapshotChanges().pipe(
        map(changes => changes.map(a => {
            const employee = a.payload.doc.data() as Employee;
            employee.id = a.payload.doc.id;

            return employee;
        }))
    ).subscribe(
        employees => {
            this.employees = employees;
        }
    );
}

然后访问我组件中的employee Array。问题是在加载/更改员工时，我不会在组件中收到通知。因此，我需要拥有一个EventEmitter，一旦员工更换并订阅了我的组件，我就会将其解雇。

Answer 1

如果需要在更多组件之间共享数据，则最好从可观察对象加载一次数据，然后使用服务将其提供给其他组件。这样，您可以最大程度地减少应用程序中的组件与外界（可观察到的）之间的交互，并使应用程序更加独立。

Answer 2

您可以将employees声明为BehaviorSubject<Employee[]>。每当您更改employees时，您都可以在this.employees上调用下一个方法，即 BehaviorSubject<Employee[]>。这样，只要该服务的employees发生更改，您就可以获取其他组件的更改。

employees: BehaviorSubject<Employee[]> = new BehaviorSubject<Employee[]>(null);

private loadEmployees() {
    this.db.collection('Employees').snapshotChanges().pipe(
        map(changes => changes.map(a => {
            const employee = a.payload.doc.data() as Employee;
            employee.id = a.payload.doc.id;

            return employee;
        }))
    ).subscribe(
        employees => this.employees.next(employees);
    );
}

哪个组件可以做到这一点：

this.businessService.employees.subscribe(employees => this.employees = employees);

将获得最近更新的employees列表。

多次订阅Oberservable，一次订阅并分享结果

2 个答案: