Wie das Kind Komponente Angular 2

Question

Details

Ich versuche, Daten von Master senden alle Produkte von api zu bekommen und ihm in einer Komponente zeigen, wie es diese Shows.

Bild

Danach, wenn ich auf Name der es auf eine andere Komponente umleiten Produkt klicken Sie auf dessen Details anzuzeigen. Ich entwickelte und Api, um alle Produkte zu erhalten, und alle APIs sind auch in der Antwort. Jetzt möchte ich die Details des APi an die Detailkomponente des Produkts senden, ohne eine weitere Anfrage zu senden, um eine API-Antwort zu erhalten.

Antwort

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

Ein Idiom ich nützlich finde, ist die folgende:

1. Geordnete Komponente besitzt das Modell. Es ist dafür verantwortlich, es zu laden und bei Bedarf zu speichern.
2. Übergeordnete Komponente bindet das Modell oder einen Teil davon an die Eingabeeigenschaft einer untergeordneten Komponente. Das Kind zeigt es an.
3. Wenn das Modell änderbar ist, ändert das Kind das Modell an Ort und benachrichtigt das übergeordnete Element mit EventEmitter, wenn das passiert.
4. Wenn das übergeordnete Element eine Benachrichtigung von der untergeordneten Komponente erhält, weiß es, dass das Modell geändert wurde.

Mit anderen Worten, das Modellobjekt wird zwischen den übergeordneten und den untergeordneten Komponentenobjekten aufgeteilt.

In diesem Zusammenhang ist die Antwort Ihr Modell. Die Detailansichtkomponente benötigt Zugriff auf einen Teil des Modells. Binden Sie diesen Teil des Modells an eine Eingabeeigenschaft der Detailansichtskomponente.