将Api响应存储在模型中，并在多个组件中共享响应

Question

详细信息

我正在调用一个Api，它给了我一些响应，我想将它存储在我创建的模式中，我希望它将模型数据共享到多个组件中，因为我不想每次都发送获取数据的请求，因为响应中有两件事，首先是Product，它包含许多Api和第二个Api。现在，当我想要该产品的特定api时，我必须发送另一个我不想要的请求。因为response提供给我的产品和apis的总数据是一个单独的调用。我如何才能做到这一点。

响应

[
  {
    "Id": 0,
    "ApimId": "5746ebcfcd7c3209247edc40",
    "Name": "Atea Service Desk",
    "Description": "Service Desk and Operations",
    "SubscriptionRequired": false,
    "ApprovalRequired": false,
    "State": "published",
    "Apis": [
      {
        "Id": 0,
        "ApimId": "5746ba28804136004d040001",
        "Name": "Echo API",
        "Description": null,
        "ServiceUrl": "http://echoapi.cloudapp.net/api",
        "ScopeId": 0,
        "WorkflowId": 0,
        "Workflow": null,
        "Scope": null,
        "CreatedDate": "2016-10-04T18:49:32.2553822+05:00",
        "CreatedBy": "LHR\\ahja",
        "UpdatedDate": "2016-10-04T18:49:32.2553822+05:00",
        "UpdatedBy": "LHR\\ahja"
      },
      {
        "Id": 0,
        "ApimId": "574c167dcd7c3216c8c633b3",
        "Name": "Servicedesk and Operations",
        "Description": "Atea Servicedesk and Operations Internal API",
        "ServiceUrl": "http://dev-endpoint.atea.com/RFC",
        "ScopeId": 0,
        "WorkflowId": 0,
        "Workflow": null,
        "Scope": null,
        "CreatedDate": "2016-10-04T18:49:32.2564039+05:00",
        "CreatedBy": "LHR\\ahja",
        "UpdatedDate": "2016-10-04T18:49:32.2564039+05:00",
        "UpdatedBy": "LHR\\ahja"
      },
      {
        "Id": 0,
        "ApimId": "574eb044cd7c320600975d85",
        "Name": "Swagger Petstore",
        "Description": "This is a sample server Petstore server.  You can find out more about Swagger at [http://swagger.io](http://swagger.io) or on [irc.freenode.net, #swagger](http://swagger.io/irc/).  For this sample, you can use the api key `special-key` to test the authorization filters.",
        "ServiceUrl": "http://petstore.swagger.io/v2",
        "ScopeId": 0,
        "WorkflowId": 0,
        "Workflow": null,
        "Scope": null,
        "CreatedDate": "2016-10-04T18:49:32.2574041+05:00",
        "CreatedBy": "LHR\\ahja",
        "UpdatedDate": "2016-10-04T18:49:32.2574041+05:00",
        "UpdatedBy": "LHR\\ahja"
      },
      {
        "Id": 0,
        "ApimId": "574eb27fcd7c320600975d86",
        "Name": "Swagger Petstore API",
        "Description": "This API is design by Swagger.io",
        "ServiceUrl": "http://petstore.swagger.wordnik.com/api",
        "ScopeId": 0,
        "WorkflowId": 0,
        "Workflow": null,
        "Scope": null,
        "CreatedDate": "2016-10-04T18:49:32.2584048+05:00",
        "CreatedBy": "LHR\\ahja",
        "UpdatedDate": "2016-10-04T18:49:32.2584048+05:00",
        "UpdatedBy": "LHR\\ahja"
      }
    ],
    "CreatedDate": "2016-10-04T18:49:32.2594056+05:00",
    "CreatedBy": "LHR\\ahja",
    "UpdatedDate": "2016-10-04T18:49:32.2594056+05:00",
    "UpdatedBy": "LHR\\ahja"
  },
  {
    "Id": 0,
    "ApimId": "57eb9930cd7c320760ee317e",
    "Name": "Non Workflow",
    "Description": "Workflow not applied to the contained APIs",
    "SubscriptionRequired": false,
    "ApprovalRequired": false,
    "State": "published",
    "Apis": [
      {
        "Id": 0,
        "ApimId": "574eb044cd7c320600975d85",
        "Name": "Swagger Petstore",
        "Description": "This is a sample server Petstore server.  You can find out more about Swagger at [http://swagger.io](http://swagger.io) or on [irc.freenode.net, #swagger](http://swagger.io/irc/).  For this sample, you can use the api key `special-key` to test the authorization filters.",
        "ServiceUrl": "http://petstore.swagger.io/v2",
        "ScopeId": 0,
        "WorkflowId": 0,
        "Workflow": null,
        "Scope": null,
        "CreatedDate": "2016-10-04T18:49:32.8218186+05:00",
        "CreatedBy": "LHR\\ahja",
        "UpdatedDate": "2016-10-04T18:49:32.8218186+05:00",
        "UpdatedBy": "LHR\\ahja"
      },
      {
        "Id": 0,
        "ApimId": "574eb27fcd7c320600975d86",
        "Name": "Swagger Petstore API",
        "Description": "This API is design by Swagger.io",
        "ServiceUrl": "http://petstore.swagger.wordnik.com/api",
        "ScopeId": 0,
        "WorkflowId": 0,
        "Workflow": null,
        "Scope": null,
        "CreatedDate": "2016-10-04T18:49:32.8228184+05:00",
        "CreatedBy": "LHR\\ahja",
        "UpdatedDate": "2016-10-04T18:49:32.8228184+05:00",
        "UpdatedBy": "LHR\\ahja"
      }
    ],
    "CreatedDate": "2016-10-04T18:49:32.8238186+05:00",
    "CreatedBy": "LHR\\ahja",
    "UpdatedDate": "2016-10-04T18:49:32.8238186+05:00",
    "UpdatedBy": "LHR\\ahja"
  },
  {
    "Id": 0,
    "ApimId": "5746ba28804136004d060001",
    "Name": "Starter",
    "Description": "Subscribers will be able to run 5 calls/minute up to a maximum of 100 calls/week.",
    "SubscriptionRequired": false,
    "ApprovalRequired": false,
    "State": "notPublished",
    "Apis": [],
    "CreatedDate": "2016-10-04T18:49:33.4234324+05:00",
    "CreatedBy": "LHR\\ahja",
    "UpdatedDate": "2016-10-04T18:49:33.4234324+05:00",
    "UpdatedBy": "LHR\\ahja"
  },
  {
    "Id": 0,
    "ApimId": "5746ba28804136004d060002",
    "Name": "Unlimited",
    "Description": "Subscribers have completely unlimited access to the API. Administrator approval is required.",
    "SubscriptionRequired": false,
    "ApprovalRequired": false,
    "State": "published",
    "Apis": [
      {
        "Id": 0,
        "ApimId": "5746ba28804136004d040001",
        "Name": "Echo API",
        "Description": null,
        "ServiceUrl": "http://echoapi.cloudapp.net/api",
        "ScopeId": 0,
        "WorkflowId": 0,
        "Workflow": null,
        "Scope": null,
        "CreatedDate": "2016-10-04T18:49:33.9833659+05:00",
        "CreatedBy": "LHR\\ahja",
        "UpdatedDate": "2016-10-04T18:49:33.9833659+05:00",
        "UpdatedBy": "LHR\\ahja"
      }
    ],
    "CreatedDate": "2016-10-04T18:49:33.9843647+05:00",
    "CreatedBy": "LHR\\ahja",
    "UpdatedDate": "2016-10-04T18:49:33.9843647+05:00",
    "UpdatedBy": "LHR\\ahja"
  }
]

模型

import {Api} from './api';
export class ProductModel {
    public Id: number;
    public Apim: string;
    public ApprovalRequired: boolean;
    public Name: string;
    public Description: string;
    public ServiceUrl: string;
    public State: string;
    public SubscriptionRequired: boolean;
    public Apis: Api[];
}

export class Api{
    Id: 0;
    ApimId: string;
    Name: string;
    Description: string;
    ServiceUrl: string;
    ScopeId: number;
    WorkflowId: number;
    Workflow: any;
    Scope: any;
    CreatedDate: string;
    CreatedBy: string;
    UpdatedDate: string;
    UpdatedBy: string;
}

组件

import { Component, Output, EventEmitter, Input } from '@angular/core';
import {ProductService} from '../../services/product.service';
import {OnInit} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {PaginatePipe, PaginationControlsCmp, PaginationService, IPaginationInstance} from 'ng2-pagination';
import { Router }  from '@angular/router';
import {NotificationsService, SimpleNotificationsComponent} from 'angular2-notifications';
import {LoadingComponent} from '../../../app/components/loading.component';

import { ProductModel} from '../../models/product.model'

@Component({
    selector: 'products',
    templateUrl: '../../app/components/product/product.html',
    providers: [ProductService, PaginationService, NotificationsService],
    directives: [PaginationControlsCmp, SimpleNotificationsComponent, LoadingComponent],
    pipes: [PaginatePipe]
})

export class ProductComponent implements OnInit {
private data: Observable<any[]>;
private id: number;
private partners: Observable<any[]>;
isAuthorized: boolean = false;
private status: string;
public config: IPaginationInstance = {
    id: 'custom',
    itemsPerPage: 10,
    currentPage: 1
};
product: ProductModel;
public options = {
    timeOut: 3000,
    lastOnBottom: true,
    clickToClose: true,
    maxLength: 0,
    maxStack: 7,
    showProgressBar: true,
    preventDuplicates: false,
    rtl: true,
    animate: "scale",
    position: ["right", "top"]
};

constructor(
    private productService: ProductService,
    private notificationService: NotificationsService) {
    this.status = 'loading';
}

ngOnInit() {
    this.productService.getProducts()
        .subscribe(data => {
            this.isAuthorized = true;
            this.data = data;
            this.product.Apim = data.Apim;

            this.status = 'active';
        },
        error => {
            console.log("error while retriving product");
            console.log(error);
        });
    }
}

Answer 1

一种可能的方法是使用公共服务，并使用该服务来检索和存储/保存该数据。你可以在Parent and children communicate via a service的例子中看到这一点。

另一种方法是使用cookie来存储这些数据，并在每个组件中从cookie读取数据，但cookie在可以存储的数据量方面存在限制。

第三种选择是利用本地存储的能力。

Answer 2

我们必须使用provider进行数据管理。

export class TestProvider {

data: any;

constructor(private http: Http) {
  this.data = null;
}

getProductById(id) {
   if (this.data) {
      return Promise.resolve(this.data);
   }

    return new Promise(resolve => {
      this.http.get('path/to/data.json')
      .map(res => res.json())
     .subscribe(data => {
       this.data = data;
       resolve(this.data);
      });
   });
  }
 }

因此，如果' data‘对象有值，那么方法将返回数据对象，并且不会连接到api。

我希望这能解决你的问题。