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();
   })
}

Example plunker.

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

providers: [ListTableService]

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

作为旁注，我建议您不要在组件中声明提供程序，如果您不明确希望拥有新的服务实例。在NgModule中声明您的提供者更清晰，更易于维护：）

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

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

1 个答案: