Question

我正在使用Angular 4（Material Design）为前端和Rest API节点/ MongoDB for backend实现Master / detail UI

首先，我要求服务populate其产品refs的类别列表，并通过JSON所有数据返回前端

我怀疑用户点击列表元素的时间：

-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。这样您就可以直接链接到产品。您可以使用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
    }

}

另一方面，如果您在主表单上，则可以从服务器获取所有数据，并将其放入缓存服务中

使用Angular实现Master详细信息的最佳/正确方法

1 个答案: