javascript - Angular, wait for one component to render completely before rendering the other - Stack Overflow

admin管理员组

文章数量:1026989

I have an angular ponent which in turn has two more ponents in it, I want to make sure that second-ponent loads/renders only after the first-ponent is rendered pletely, how can I achieve it?

binedponent.html

<first-ponent></first-ponent>
<second-ponent></second-ponent>

binedponent.ts

import { Component } from '@angular/core';

@Component({
    selector: 'main-ponent',
    templateUrl: './binedponent.html',
    styleUrls: ['./binedponent.css']
})
export class CombimedComponent {

}

I have an angular ponent which in turn has two more ponents in it, I want to make sure that second-ponent loads/renders only after the first-ponent is rendered pletely, how can I achieve it?

bined.ponent.html

<first-ponent></first-ponent>
<second-ponent></second-ponent>

bined.ponent.ts

import { Component } from '@angular/core';

@Component({
    selector: 'main-ponent',
    templateUrl: './bined.ponent.html',
    styleUrls: ['./bined.ponent.css']
})
export class CombimedComponent {

}

• javascript
• angular
• typescript

Share Improve this question Follow asked Aug 6, 2019 at 4:03 Nikhil BharadwajNikhil Bharadwaj 91755 gold badges2626 silver badges5151 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

An easy way to do it would be...

In your first child ponent add an EventEmitter that fires an event after it has been pletely loaded like so

first-ponent.ponent.ts

import { Component, Output, EventEmitter, AfterViewChecked } from 'angular/core';

// ...

@Output() finishedLoading: EventEmitter<boolean> = new EventEmitter<boolean>();

ngAfterViewChecked() {
   // you could also do this after a service call of some sort
   this.finishedLoading.emit(true);
}

ngAfterViewChecked is the last lifecycle hook run on a ponent, so at this point the ponent has been pletely loaded!

You can learn more about lifecycle hooks here

Then in your parent container you can set a flag called hasLoaded

bined.ponent.ts

// ...

hasLoaded: boolean = false;

then in your parents ponent html you can listen for the finishedLoading event and then render your second ponent like so..

bined.ponent.ts

<!-- Listens for the finishedLoading event and then sets hasLoaded once its been fired -->
<first-ponent (finishedLoading)="hasLoaded = $event"></first-ponent>

<!-- Doesnt render the second ponent until hasLoaded has been set to true -->
<second-ponent *ngIf="hasLoaded"></second-ponent>

I have an angular ponent which in turn has two more ponents in it, I want to make sure that second-ponent loads/renders only after the first-ponent is rendered pletely, how can I achieve it?

binedponent.html

<first-ponent></first-ponent>
<second-ponent></second-ponent>

binedponent.ts

import { Component } from '@angular/core';

@Component({
    selector: 'main-ponent',
    templateUrl: './binedponent.html',
    styleUrls: ['./binedponent.css']
})
export class CombimedComponent {

}

I have an angular ponent which in turn has two more ponents in it, I want to make sure that second-ponent loads/renders only after the first-ponent is rendered pletely, how can I achieve it?

bined.ponent.html

<first-ponent></first-ponent>
<second-ponent></second-ponent>

bined.ponent.ts

import { Component } from '@angular/core';

@Component({
    selector: 'main-ponent',
    templateUrl: './bined.ponent.html',
    styleUrls: ['./bined.ponent.css']
})
export class CombimedComponent {

}

• javascript
• angular
• typescript

Share Improve this question Follow asked Aug 6, 2019 at 4:03 Nikhil BharadwajNikhil Bharadwaj 91755 gold badges2626 silver badges5151 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

An easy way to do it would be...

In your first child ponent add an EventEmitter that fires an event after it has been pletely loaded like so

first-ponent.ponent.ts

import { Component, Output, EventEmitter, AfterViewChecked } from 'angular/core';

// ...

@Output() finishedLoading: EventEmitter<boolean> = new EventEmitter<boolean>();

ngAfterViewChecked() {
   // you could also do this after a service call of some sort
   this.finishedLoading.emit(true);
}

ngAfterViewChecked is the last lifecycle hook run on a ponent, so at this point the ponent has been pletely loaded!

You can learn more about lifecycle hooks here

Then in your parent container you can set a flag called hasLoaded

bined.ponent.ts

// ...

hasLoaded: boolean = false;

then in your parents ponent html you can listen for the finishedLoading event and then render your second ponent like so..

bined.ponent.ts

<!-- Listens for the finishedLoading event and then sets hasLoaded once its been fired -->
<first-ponent (finishedLoading)="hasLoaded = $event"></first-ponent>

<!-- Doesnt render the second ponent until hasLoaded has been set to true -->
<second-ponent *ngIf="hasLoaded"></second-ponent>

本文标签：