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

【问题标题】：How to get the latest data in child component angular2如何获取子组件angular2中的最新数据
【发布时间】：2017-02-15 01:39:59
【问题描述】：

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

我有我的父组件：

@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;

key total 仍未定义，因为视图是在服务调用完成之前完成的。

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

【问题讨论】：

使用已发布的可观察事件的服务。组件可以订阅这些事件，并在事件触发时执行数学运算。我认为 Flux 模式会对您有所帮助：stackoverflow.com/questions/42219858/…
我正在使用服务从后端获取所有数据...所以您的意思是我需要为子组件提供服务，以便父组件将信息存储在那里？但在我的情况下，数据正在更新，但 updateFooter() 函数在更新后不会触发。所以 var amountofPages 已经过时了
如果没有，我能做的就是对父级进行数学运算，然后发送最终值，这样我就不需要子级的任何函数，但不是最好的接近
抱歉，它可能不是您要找的答案。我认为它可能对您的情况有用，对您的服务进行一些返工。
你能解释一下基于我的代码的解决方案吗？谢谢！

标签： angular

【解决方案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();
   })
}

Example plunker.

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

providers: [ListTableService]

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

作为旁注，我建议您不要在组件中声明提供程序，如果您不明确希望拥有一个新的服务实例。在NgModule 中声明您的提供程序更加简洁且易于维护:)

有关组件交互的更多信息：shared service（+ 其他可能性）

【讨论】：