Как отправить данные от ведущего к ребенку компоненте Угловой 2

Question

Деталь

Я пытаюсь получить весь продукт из апи и показать его в компоненте Он показывает, как это.

Изображение

После этого, когда я нажимаю на название продукта, он перенаправляет к другому компоненту, чтобы показать его детали. Я разработал и Api, чтобы получить весь продукт, и в нем все APi также находятся в этом ответе. Теперь я хочу отправить деталь APi детализировать компонент продукта без отправки другого запроса на получение ответа api.

Response

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

Answer 1

Один идиома я считаю полезным является следующее:

1. компонент Родитель имеет модель. Он несет ответственность за его загрузку и при необходимости.
2. Родительский компонент связывает модель или ее часть с входным свойством дочернего компонента. Ребенок отображает его.
3. Если модель изменчива, ребенок модифицирует модель на месте и уведомляет родителя EventEmitter, когда это произойдет.
4. Когда родитель получает уведомление от дочернего компонента, он знает, что модель изменилась.

Другими словами, объект модели разделяется между родительским и дочерним компонентами.

В этом контексте ответ является вашей моделью. Компонент подробного представления требует доступа к части модели. Привяжите эту часть модели к входному свойству компонента подробного представления.