如何獲得的子組件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

回答

相關問題