D
D
Dmitry Gavrilenko2017-07-17 23:47:21
Web development
Dmitry Gavrilenko, 2017-07-17 23:47:21

Angular 2 initialize nested component before ngOnInit?

Good evening.
Straight to the point.
There is a main component that implements OnInit, in which the server is called, and the resulting data array is written to the component's products variable. Seems clear and crisp.
main has markup like:

...
<product [data]="products[0]"></product>
<div class="small">
    <product class="small_product" *ngFor="let index of [1, 2]" [data]="products[index]"></product>
</div>
...

We abstract from the fact that the data from the server may not come or their number will be less than 3. We do not pay attention to this.
So. The product component also implements OnInit. Now, running a similar code and getting such garbage in the logs.
1) main - controller
2) product - controller <---- very first
3) main - OnInit
4) product - OnInit <---- very first
5) main - OnInit - server request
6) product - controller
7) product - controller
8) product - OnInit
9) product - OnInit
Here are the headaches delivered by steps 2 and 4. The main component has not fully come to life yet, and the first product has already taken off, in fact, data from products[0] did not get into it either, because the data was obtained only at step 5.
Here's what comes of it. The first product was initialized "by default":
K5jjj0GSvy8.jpg
It should work like this:
1) main - controller
2) main - OnInit
3) main - OnInit - request for the server
4) product - controller <---- the very first
5) product - OnInit < ---- the very first
6) product - controller
7) product - controller
8) product - OnInit
9) product - OnInit
Tell me what this behavior can be connected with?
PS: the request to the server is performed according to all the canons using Observable.subscribe

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question