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

Question

详细

我正在尝试从api获取所有产品并在组件中显示它显示如下。

图像

在此之后，当我点击产品的名称时，它会重定向到另一个组件以显示其详细信息。我开发了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"
    }
]

Answer 1

我认为有用的一个成语如下：

1. 父组件拥有该模型。它负责加载它并在必要时保持它。
2. 父组件将模型或其一部分绑定到子组件的输入属性。孩子显示它。
3. 如果模型是可变的，那么孩子会就地修改模型，并在发生这种情况时通过EventEmitter通知父母。
4. 当父级收到来自子组件的通知时，它知道模型已更改。

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

在此上下文中，响应是您的模型。详细视图组件需要访问模型的一部分。将模型的该部分绑定到详细视图组件的输入属性。