![](/img/trans.png)
[英]How to pass data between components, if they are not parent-child components in Angular2?
[英]@Input() Not Passing As Expected Between Parent-Child Components in Angular 2 App
我正在尝试抽象出表格数据显示,使其成为可以加载到各种父组件中的子组件。 我这样做是为了使整个应用程序更“干燥”。 在使用observable订阅服务并进行API调用之前,直接将其打印到每个组件视图(每个视图都有表格布局)。 现在,我想将表格数据区域作为子组件,并仅对每个父组件绑定可观察的结果。 无论出于何种原因,这都无法正常工作。
这是我在父组件视图中所拥有的:
<div class="page-view">
<div class="page-view-left">
<admin-left-panel></admin-left-panel>
</div>
<div class="page-view-right">
<div class="page-content">
<admin-tabs></admin-tabs>
<table-display [records]="records"></table-display>
</div>
</div>
</div>
组件文件如下所示:
import { API } from './../../../data/api.service';
import { AccountService } from './../../../data/account.service';
import { Component, OnInit, Input } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { TableDisplayComponent } from './../table-display/table-display.component';
@Component({
selector: 'account-comp',
templateUrl: 'app/views/account/account.component.html',
styleUrls: ['app/styles/app.styles.css']
})
export class AccountComponent extends TabPage implements OnInit {
private section: string;
records = [];
errorMsg: string;
constructor(private accountService: AccountService,
router: Router,
route: ActivatedRoute) {
}
ngOnInit() {
this.accountService.getAccount()
.subscribe(resRecordsData => this.records = resRecordsData,
responseRecordsError => this.errorMsg = responseRecordsError);
}
}
然后,在子组件(包含表显示视图的子组件)中,我包括一个用于“记录”的@Input()-这是我的observable结果分配给父组件的结果。 因此,在子级(表显示)组件中,我有以下内容:
import { AccountService } from './../../../data/account.service';
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'table-display',
templateUrl: './table-display.component.html',
styleUrls: ['./table-display.component.less']
})
export class TableDisplayComponent {
@Input() records;
constructor() {
}
}
最后,这是我的表格显示视图中的一些相关代码:
<tr *ngFor="let record of records; let i = index;">
<td>{{record.name.first}} {{record.name.last}}</td>
<td>{{record.startDate | date:"MM/dd/yy"}}</td>
<td><a class="bluelink" [routerLink]="['/client', record._id ]">{{record.name.first}} {{record.name.last}}</a></td>
当我在此配置中使用它时,我通过API /数据库获取的“记录”属性出现“未定义”错误。 在同一组件中同时显示表和进行服务调用时,没有得到这些错误。 因此,我在这里所做的只是将表显示抽象出来,以便我可以将其嵌套在多个父组件中使用,而不是在需要它的每个父组件中都完全显示相同的表显示。
我在这里想念什么? 这种配置看起来有什么问题?
您需要防止记录为空,直到它进入您的子组件(因此它是视图)为止。
使用Elvis运算符来保护您的模板:
<tr *ngFor="let record of records; let i = index;">
<td>{{record?.name?.first}} {{record?.name?.last}}</td>
<td>{{record?.startDate | date:"MM/dd/yy"}}</td>
<td><a class="bluelink" [routerLink]="['/client', record?._id ]"> {{record?.name?.first}} {{record?.name?.last}}</a></td>
您也可以将输入分配给空数组以解决此问题:
@Input() records = [];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.