如何将数据从主组件发送到子组件Angular 2

Question

详细信息

我试图从api获得所有的产品，并将其显示在一个组件中，它显示如下。

图像

​

之后，当我单击该产品的名称时，它会重定向到另一个组件以显示其详细信息。我开发和Api来获得所有的产品，在它的所有APi的也在它的回应。现在，我希望将api的详细信息发送到产品的detail组件，而不发送另一个获取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"
    }
]

Answer 1

我发现的一个有用的习惯用法如下：

1. 父组件拥有该模型。如果necessary.
2. Parent组件将模型或模型的一部分绑定到子组件的输入属性，则它负责加载和持久化模型。子项显示它。
3. 如果模型是可变的，子项将就地修改模型，并在发生这种情况时使用EventEmitter通知父项。
4. 当父项收到来自子组件的通知时，它知道模型已更改。

换句话说，模型对象在父组件对象和子组件对象之间共享。

在这种情况下，响应就是您的模型。局部视图构件需要访问模型的一部分。将模型的该部分绑定到局部视图构件的输入特性。