input - Angular 2将对象传递给组件

Question

我正在尝试将一个对象传递给另一个组件。

请求列表.html

<tr [routerLink]="['Request', { id: request.id }]" *ngFor="let request of requests" [req]="request">
                        <td class=" ">{{ request.datum }}</td>
                        <td class=" ">{{ request.artist.name }} </td>
                        <td class=" ">{{ request.artist.user.first_name }}
                        <td class=" ">{{ request.user.first_name }}</td>
                        <td class=" ">{{ request.duration.price }}</td>
                        <td class=" ">{{ request.created_at }}</td>
                        <td class=" ">{{ request.rejected_at }}</td>
                    </tr>

请求列表组件

import {Component} from '@angular/core';
import {Service} from './../services/service.service';
import {Request} from './../classes/request';
import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {RequestComponent} from './request.component';

@Component({
  directives: [ROUTER_DIRECTIVES, RequestComponent],
  templateUrl: 'partials/request-list.html'
})

export class RequestListComponent {
  requests: Request[];
  constructor(private _Service: Service) {}

  ngOnInit(){
    this._Service.getRequests().subscribe(data => this.requests = data);
  }
}

请求组件

import {Component, Input} from '@angular/core';
import {Service} from './../services/service.service';
import {Request} from './../classes/request';


@Component({
  templateUrl: 'partials/request.html'
})

export class RequestComponent {
  @Input() req: Request;

  constructor(private _Service: Service) {}
}

但是我收到错误消息:“无法绑定(bind)到‘req’，因为它不是已知的 native 属性”

我做错了什么？

Answer 1

正如我在评论中提到的，如果您的 RequestComponent 加载了 Router，则您不能使用 @Input()。不幸的是，无法使用 RouteLink 指令传递 RouteData。

为了解决这个问题，我会从服务中加载 Request 到 RequestComponent 中，你用来加载 Requests 列表.要减少到后端的流量，如果有的话，您可以构建一些缓存机制。

export class RequestComponent {
    req: Request;

    constructor(private _Service: Service, routeParams : RouteParams) {
        this.req = _Service.getRequestById(routeParams.get('id'));
    }
}