詳細

を複数のコンポーネントでその応答を共有するには、私はそれが私にいくつかの応答を与え、私は私が作成している私のモードにして、それを保存したいと私は共有にそれをしたいAPIを呼び出していますそれは、データを取得するたびにリクエストを送信したくないので、データを複数のコンポーネントにモデル化します。なぜなら、レスポンスには、最初に2つのApisと2つ目のapisを含むProductがあるからです。私がその製品に特定のAPIを必要とするとき、私は欲しくない別の要求を送る必要があります。応答は私に製品とapisの合計データを与えたので、単一の呼び出しです。どうすれば達成できますか？ストアのAPIモデルでの応答と

応答

[ 
    { 
    "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); 
     }); 
    } 
}

出典

2016-10-05 Malik Kashmiri

何を試しましたか？サービスを作成し、そのデータをサービスに格納します。サービスを理解するための助けが必要な方はこちら[こちら]（https://angular.io/docs/ts/latest/tutorial/toh-pt4.html） –

私のコンポーネントを更新しました –

一成分はという共通のサービスを利用して取得するために、そのサービスを利用することで、店舗/ホールドデータ。たとえば、Parent and children communicate via a serviceのように表示されます。

このようなデータを保存するためにCookieを使用し、各コンポーネントにCookieからそのデータを読み込む方法もありますが、そこに保存できるデータ量には制限があります。

第3のオプションは、ローカルストレージのパワーを活用することです。

出典

2016-10-05 10:22:20 Pradeep

データ管理にプロバイダを使用する必要があります。

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); 
     }); 
    }); 
    } 
}

「データ」オブジェクトに値がある場合、メソッドはデータオブジェクトを返し、APIに接続しません。

私はあなたの問題を解決することを願っています。

出典

2016-10-05 10:32:48

ストアのAPIモデルでの応答と

詳細

応答

モデル

可能な方法の

答えて

関連する問題