[英]Angular 2 passing object to component
I'm trying to pass an object to another component. 我正在尝试将对象传递给另一个组件。
Request-list.html 请求list.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>
RequestListComponent RequestListComponent
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);
}
}
RequestComponent RequestComponent
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) {}
}
However I get the error: "Can't bind to 'req' since it isn't a known native property" 但是我收到错误:“无法绑定到'req',因为它不是已知的本机属性”
What am I doing wrong? 我究竟做错了什么?
As I mentioned in my comment, you cannot use @Input()
if your RequestComponent
is loaded with the Router
. 正如我在我的评论中提到,您不能使用
@Input()
如果你的RequestComponent
装有Router
。 Unfortunately it is not possible to pass RouteData
with the RouteLink
-Directive. 遗憾的是,无法使用
RouteLink
-Directive传递RouteData
。
To solve this problem, I would load the Request
inside the RequestComponent
from the service, which you used to load the list of Requests
. 为了解决这个问题,我将从服务中加载
RequestComponent
的Request
,用于加载Requests
列表。 To reduce the traffic to a backend, if you have one, you can build some caching mechanism. 要减少后端的流量,如果有的话,可以构建一些缓存机制。
export class RequestComponent {
req: Request;
constructor(private _Service: Service, routeParams : RouteParams) {
this.req = _Service.getRequestById(routeParams.get('id'));
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.