詳細

我試圖從API獲得所有產品，並顯示在一個組件，但是這樣表示。如何從主數據發送到子組件角2

圖片

在此之後，當我點擊它重定向到另一個組件，以顯示其詳細的產品名稱。我開發了Api並獲得所有產品，並且所有APi也都在其中進行響應。現在，我想將APi的詳細信息發送給產品的詳細組件，而不發送其他請求以獲取API響應。

響應

[ 
    { 
     "Id": 1, 
     "ApimId": "5746ebcfcd7c3209247edc40", 
     "Name": "Atea Service Desk", 
     "Description": "Service Desk and Operations", 
     "SubscriptionRequired": false, 
     "ApprovalRequired": false, 
     "State": "published", 
     "Apis": [ 
      { 
       "Id": 1, 
       "ApimId": "5746ba28804136004d040001", 
       "Name": "Echo API", 
       "Description": null, 
       "ServiceUrl": "http://echoapi.cloudapp.net/api", 
       "CreatedDate": "2016-09-20T11:37:09.162243+05:00", 
       "CreatedBy": "LHR\\ahja", 
       "UpdatedDate": "2016-09-20T11:37:09.162243+05:00", 
       "UpdatedBy": "LHR\\ahja" 
      }, 
      { 
       "Id": 2, 
       "ApimId": "574c167dcd7c3216c8c633b3", 
       "Name": "Servicedesk and Operations", 
       "Description": "Atea Servicedesk and Operations Internal API", 
       "ServiceUrl": "http://dev-endpoint.atea.com/RFC", 
       "CreatedDate": "2016-09-20T11:37:09.162243+05:00", 
       "CreatedBy": "LHR\\ahja", 
       "UpdatedDate": "2016-09-20T11:37:09.162243+05:00", 
       "UpdatedBy": "LHR\\ahja" 
      }, 
      { 
       "Id": 3, 
       "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", 
       "CreatedDate": "2016-09-20T11:37:09.162243+05:00", 
       "CreatedBy": "LHR\\ahja", 
       "UpdatedDate": "2016-09-20T11:37:09.162243+05:00", 
       "UpdatedBy": "LHR\\ahja" 
      }, 
      { 
       "Id": 4, 
       "ApimId": "574eb27fcd7c320600975d86", 
       "Name": "Swagger Petstore API", 
       "Description": "This API is design by Swagger.io", 
       "ServiceUrl": "http://petstore.swagger.wordnik.com/api", 
       "CreatedDate": "2016-09-20T11:37:09.162243+05:00", 
       "CreatedBy": "LHR\\ahja", 
       "UpdatedDate": "2016-09-20T11:37:09.162243+05:00", 
       "UpdatedBy": "LHR\\ahja" 
      } 
     ], 
     "CreatedDate": "2016-09-20T11:37:09.162243+05:00", 
     "CreatedBy": "LHR\\ahja", 
     "UpdatedDate": "2016-09-20T11:37:09.162243+05:00", 
     "UpdatedBy": "LHR\\ahja" 
    }, 
    { 
     "Id": 3, 
     "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-09-20T11:37:09.7128066+05:00", 
     "CreatedBy": "LHR\\ahja", 
     "UpdatedDate": "2016-09-20T11:37:09.7128066+05:00", 
     "UpdatedBy": "LHR\\ahja" 
    }, 
    { 
     "Id": 2, 
     "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": 5, 
       "ApimId": "5746ba28804136004d040001", 
       "Name": "Echo API", 
       "Description": null, 
       "ServiceUrl": "http://echoapi.cloudapp.net/api", 
       "CreatedDate": "2016-09-20T11:37:10.3071696+05:00", 
       "CreatedBy": "LHR\\ahja", 
       "UpdatedDate": "2016-09-20T11:37:10.3071696+05:00", 
       "UpdatedBy": "LHR\\ahja" 
      } 
     ], 
     "CreatedDate": "2016-09-20T11:37:10.3071696+05:00", 
     "CreatedBy": "LHR\\ahja", 
     "UpdatedDate": "2016-09-20T11:37:10.3071696+05:00", 
     "UpdatedBy": "LHR\\ahja" 
    } 
]

來源

2016-09-20 Malik Kashmiri

共享服務，將存儲您的數據或存儲。 http://stackoverflow.com/questions/39006427/angular2-is-it-possible-to-share-observable-data-with-other-components/39006693#39006693 –

@Input（）用於從一個組件發送數據到另一個。 https://angular.io/docs/ts/latest/cookbook/component-communication.html – ranjeet8082

一個成語我發現有用的是以下幾點：

父組件擁有的模型。它負責加載並在必要時保持它。
父組件將模型或其一部分綁定到子組件的輸入屬性。孩子顯示它。
如果模型是可變的，孩子會就地修改模型，並在發生這種情況時通知父母EventEmitter。
當家長收到來自子組件的通知時，它知道模型已更改。

換句話說，模型對象在父組件對象和子組件對象之間共享。

在這種情況下，回答是您的模型。詳細視圖組件需要訪問模型的一部分。將模型的該部分綁定到詳細視圖組件的輸入屬性。

來源

2016-09-20 09:21:23

如何從主數據發送到子組件角2

詳細

圖片

響應

回答

相關問題