如何获取子组件angular2中的最新数据

Question

我需要在子组件中更新数据以进行一些数学

我有我的父组件：

@Component({
selector: 'car-brand-index',
templateUrl: './index.component.html',
styleUrls: ['./index.component.scss'],
providers: [CarBrandService, Response, SessionService, ServerService,     ListTableComponent, TableAction, Table, TableRow, TableRowField]
})
export class CarBrandIndexComponent implements OnInit {
table = new Table();
constructor(private mainService : CarBrandService) {
this.refresh(this.table.page,this.table.size);
}
refresh(pageNumber : number, pageSize : number){
this.mainService.get(pageNumber, pageSize).then(result => {
this.table.total = result.data.total;
});
}

在我看来：

<list-table [info]="table" (updateTable)="updateTable($event)"></list-table>

所以我将var表发送到组件列表表

在我的子组件中，我有

@Component({
selector: 'list-table',
templateUrl: './list-table.component.html',
styleUrls: ['./list-table.component.scss'],
providers: [ListTableService]
})
export class ListTableComponent implements OnInit {
@Input() 
info: Table;
@Output()
updateTable = new EventEmitter();
pages : number[] = [];
constructor(public listTableService : ListTableService) {
}
updateFooter() {
if(this.info){
var amountofPages = this.info.total % this.info.size == 0 ? ( this.info.total % this.info.size ) : ( this.info.total % this.info.size ) + 1;
for(var i = 1; i <= amountofPages; i++){
this.pages.push(i);
}
}
}
ngOnInit(){
this.updateFooter();
}
}

问题是：

var amountofPages = this.info.total % this.info.size == 0 ? ( this.info.total % this.info.size ) : ( this.info.total % this.info.size ) + 1;

键总数仍然未定义，因为视图是在服务调用完成之前完成的。

我试着用promise做刷新功能，但结果是一样的。有没有一种方法可以在将变量发送给子组件之前等待完成变量，或者子组件知道值何时更新，以便执行数学运算？

Answer 1

如前所述，服务将是最好的选择。你不需要创建一个新的服务，你可以利用现有的服务，只需添加一些内容。所以添加一个子组件将订阅的Subject

服务，我在这里使用你的ListTableService

private tableVar = new Subject<number>();
newTable = this.tableVar.asObservable();
tableReceived(table: string) {
this.tableVar.next(table);
}

检索数据时的父组件

refresh(pageNumber : number, pageSize : number){
this.mainService.get(pageNumber, pageSize).then(result => {
this.table.total = result.data.total;
this.listTableService.tableReceived(this.table); // add this!
});
}

在您的孩子中，将updateFooter-函数的调用移动到table的订阅中。因此，在您的子构造函数中：

constructor(public listTableService : ListTableService) {
listTableService.newTable.subscribe(table => {
this.info = table;
this.updateFooter();
})
}

示例plunker

需要注意的一点是，必须删除子组件中的服务提供商：

providers: [ListTableService]

因为如果不这样做，您将得到一个新的服务实例，该实例将不包含父级设置的table值。删除此提供程序时，Angular将遵循层次结构并找到下一级提供程序，在您的情况下，该提供程序将是具有提供程序ListTableService的父提供程序，这意味着您的父和子提供程序将共享服务的同一实例。

顺便说一句，如果您不明确希望拥有服务的新实例，我建议您不要在组件中声明提供者。在NgModule中声明您的提供商更干净、更容易维护：)

更多关于组件交互的信息：共享服务(+其他可能性)