主页 / 问题 / 895782
Accepted
Nevega
Asked:2020-10-21 05:50:00 +0000 UTC2020-10-21 05:50:00 +0000 UTC

从服务更新不同组件中的数据

  • 772

有 2 个组件 A 和 B，以及一个具有“获取数据”和“更新数据”两个功能的服务在数据库中。两个组件都使用数据模型，服务注册在公共模块中。更新数据库中的数据后如何在两个组件中获取更新的模型。? 那些。如何强制完成接收数据的功能？

angular5

1 个回答

  1. Best Answer

    只需在同一服务中创建一个事件生成器，它将为两个订阅者触发一个事件：

    import { Injectable } from '@angular/core';

import { Subject } from 'rxjs/Subject';

@Injectable({
    providedIn: 'root'
})
class Service {
    public dataUpdated$ = new Subject();

    public getData() {
        return this.http.get(URL);
    }

    public updateData(body) {
        return this.http.patch(URL, body);
    }
}

    接下来，我们在两个组件中进行订阅：

    import { takeUntil } from 'rxjs/operators/takeUntil';

class AComponent implements OnDestroy {
    private destroy$ = new Subject<void>();

    constructor(service: Service) {
        service.dataUpdated$.asObservable().pipe(takeUntil(this.destroy$)).subscribe((data) => {
            console.log('Новый объект: ', data);
        });
    }

    public ngOnDestroy(): void {
        this.destroy$.next();
        this.destroy$.complete();
    }
}

class BComponent implements OnDestroy {
    private destroy$ = new Subject<void>();

    constructor(service: Service) {
        service.dataUpdated$.asObservable().pipe(takeUntil(this.destroy$)).subscribe((data) => {
            console.log('Новый объект: ', data);
        });
    }

    public ngOnDestroy(): void {
        this.destroy$.next();
        this.destroy$.complete();
    }
}

    您还需要知道发生了什么变化，我希望您的 API 返回更改后的模型：

    import { tap } from 'rxjs/operators/tap';

public updateData(body) {
    return this.http.patch(URL, body).pipe(
        tap((data) => this.dataUpdated$.next(data))
    );
}

    如果没有，那么您手动改变对象并tap通过它生成一个事件。

    • 1

相关问题