主页 / 问题 / 914488
Accepted
bruce
Asked:2020-12-02 21:17:55 +0000 UTC2020-12-02 21:17:55 +0000 UTC

如何在 Angular 中正确构建小型模型架构？

  • 772

每个页面都有多个获取请求。比如我有4个get请求获取数据（first、second、third、fourh），我知道first、second指的是“firstPage”路由下的页面，第三、第四——指的是“secondPage”下的页面“路线。我不想一次发出所有的 get 请求（也就是说，如果我通过 secondPage 路由，我想获取它的数据）。

{
 firstPage: {
  one: [],
  two: []
 },
 secondPage: {
  three: [],
  four: []
 }
}

在哪里或如何放置所有页面的这个单一公共对象，以便我可以在任何组件中找出特定页面中的数组（即，通过引用 secondPage 对象的字段，我的 ide 可以告诉我有里面有两个数组）？

архитектура

1 个回答

  1. Best Answer

    创建一个简单的单例，它将在整个应用程序中摸索数据：

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

import { BehaviorSubject, Observable } from 'rxjs';

interface Data {
    firstPage: {
        one: any[];
        two: any[];
    };
    secondPage: {
        three: any[];
        four: any[];
    }
}

@Injectable({ providedIn: 'root' })
export class DataService {
    private data$ = new BehaviorSubject<Data>({
        firstPage: {
            one: [],
            two: []
        },
        secondPage: {
            three: [],
            four: []
        }
    });

    public getDataStream(): Observable<Data> {
        return this.data$.asObservable();
    }

    public getData(): Data {
        return this.data$.getValue();
    }

    public getDataByPage(page: string) {
        return this.getData()[page];
    }

    public setData(page: string, data: object): void {
        const currentData = this.getData();

        this.data$.next({
            ...currentData,
            [page]: data
        });
    }
}

    用于BehaviorSubject缓存。此外，如果您说您知道哪些数据属于哪些组件，那么只需发出请求并设置一个新值：

    // first.component.ts

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

import { tap } from 'rxjs/operators';

@Component({
    selector: 'app-first',
    templateUrl: './first.component.html'
})
export class FirstComponent {
    constructor(private api: ApiService, private dataService: DataService) {
        this.api.getDataForFirstPage().pipe(
            tap((data) => {
                this.dataService.setData('firstPage', data);
                // предполагаем, что `data` это объект со свойствами `one, two`
            })
        ).subscribe(....);
    }
}

    PS——你也可以加一个检查数据是否已经加载，以免重新请求第N个组件初始化。

    • 1

相关问题