Best/correct 使用 Angular 实现主细节的方法

Question

我正在为前端实现 Master/detail UI Angular 4（Material 设计），其余 API Node/MongoDB后端

首先，我请求通过 JSON 所有数据

将 populate 他们的产品 refs 和 returns 的类别列表服务器发送到前端]

我的疑问是关于用户何时单击列表元素：

-Pass whole data of the product to render it via `queryParams`

-Pass whole data of the product to render it via injected local Data service

-Pass id of the product via URL an then request the info to server again

应用程序的正常流程是什么？

有更好的方法吗？

Answer 1

尽管这主要是基于意见，但最好的方法是通过 URL 传递产品 ID。这样您也可以直接 link 访问该产品。您可以使用可以预取组件数据的 resolve guard 服务获取数据。

如果你担心双重请求，你可以创建一个缓存服务，从内存存储的产品集合中获取结果，如果在那里找不到，就从服务器请求数据。

未经测试的示例代码

@Injectable()
export class ProductCollectionCache {

    public readonly products: Product[] = [];

    public async getProduct(id: number): Promise<Product> {
       let product: Product = this.products.filter(p => p.id === id)[0];
       if (!product) {
           product = await this.productGetterService.getProduct(id);
       }
       return product;
    }

    public async getProductCollection(): Promise<Product[]> {
       //get collection or return cached
    }

}

另一方面，如果你在master form上，你可以从服务器获取所有数据，并将其放入缓存服务中

Best/correct 使用 Angular 实现主细节的方法

Best/correct way to implement Master detail with Angular

node.js

angular

master-detail