如何获得的子组件angular2

我需要保持在一个子组件更新的数据做一些数学的最新数据如何获得的子组件angular2

我有我的父组件：

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

所以我送无功表组件列表表

在我的卡LD组件我有

@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来做刷新函数，但结果是一样的。有什么方法可以等待在将变量发送给子组件之前完成该变量，或者子组件知道何时更新了值以便它可以执行数学运算？

来源

2017-02-15 Faabass

使用服务，与已发表的观察到的事件。组件可以订阅这些事件，并在事件触发时执行数学计算。我认为Flux模式可以帮助你：http://stackoverflow.com/questions/42219858/how-can-i-maintain-the-state-of-dialog-box-with-progress-all-over-my-angular -2-a/42221273？noredirect = 1＃comment71607237_42221273 – pixelbits

我正在使用服务从后端获取所有数据...所以，您的意思是我需要为子组件提供服务，以便父服务器存储信息那里？但在我的情况下，数据正在更新，但updateFooter（）函数不会在该更新后触发。所以var var ofofages is outofdate – Faabass

如果不是，我可以做的就是对父项进行数学计算，然后发送最终值，这样我就不需要任何子函数，但不是最好的方法 – Faabass

如前所述，服务是最好的选择。你不需要创建一个新的服务，你可以利用你拥有的服务，只是做一些补充。因此，添加子组件将订阅的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! 
    }); 
}

而在你的孩子，请改为在table订阅内移动updateFooter-功能的呼叫。所以，在孩子的构造函数：

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

Example plunker.

有一点要注意，就是你MUST删除服务的子组件供应商：

providers: [ListTableService]

因为如果你不要，你会得到一个新的服务实例，它不包含父级设置的table值。当删除此提供商时，Angular会按照层次结构找到下一级提供商，在您的情况下，该提供商将为提供商ListTableService的父级，这意味着您的父母和子女将共享相同实例的服务。

作为一个旁注，我会建议您不要在您的组件中声明提供程序，如果您没有明确想要有新的服务实例。要在NgModule声明你的供应商是更清洁，更容易维护:)

更多组件交互：shared service（+其他可能性）

来源

2017-02-15 10:05:44 Alex

这完全有效！谢谢！ – Faabass

如何获得的子组件angular2

回答

相关问题