Как показать страницу только тогда, когда все дети полностью загружены в Angular 5?

Question

У меня есть страница с несколькими дочерними компонентами:

<div class="wrapper" *ngIf="isPageFullyLoaded">

  <header></header>

  <main class="content">
      <trip-list></trip-list> 
  </main>

  <footer></footer>
 </div>

Файл ts содержит следующее:

...
public isPageFullyLoaded = false;
...
ngAfterContentInit() {
        this.isPageFullyLoaded = true;
    }

The child trips-list:
<section *ngIf="trips">
    <ul>
        <li *ngFor="let data of trips" >
...

Список поездок загружается с помощью rest api:

getTrips() {
    this.fundService.getTrips().subscribe(
      data => { this.trips= data; }, 
      err => console.error(err),
      () => console.log(this.trips)
    );
  }

Я пробовал также ngAfterViewInit

Мне нужен способ показать основной div только тогда, когда дети были полностью загружены. Я не могу использовать * ngIf внутри div, потому что дочерний компонент не будет загружен.

Есть идеи, как это сделать?

Answer 1

Если свойство allChildrenLoaded указывает, что дочерние элементы загружены, вы можете привязать его к свойству hidden основного div. В отличие от ngIf, который загружает элемент только при выполнении условия, свойство hidden скрывает элемент, который фактически присутствует в DOM.

<div class="wrapper" [hidden]="!allChildrenLoaded">
  <child1></child1>
  <child2 *ngFor="let value of values"></child2>
  <trip-list (loaded)="onTripListLoaded()"></trip-list>
</div>

<Ч />

Вы можете использовать @ViewChildren и событие changes QueryList, чтобы определить, когда загружены компоненты:

export class ParentComponent implements AfterViewInit {

  @ViewChildren(Child1Component) children1: QueryList<Child1Component>;
  @ViewChildren(Child2Component) children2: QueryList<Child2Component>;

  private child1Loaded = false;
  private children2Loaded = false;
  private tripListLoaded = false;

  private expectedChildren2Count = 5; // Expected number of Child2Component to be loaded

  constructor(private cd: ChangeDetectorRef) { }

  ngAfterViewInit() {
    this.child1Loaded = this.children1.length > 0;
    this.children2Loaded = this.children2.length === expectedChildren2Count;
    this.cd.detectChanges(); // To avoid possible runtime error

    this.children1.changes.subscribe(() => {
      this.child1Loaded = this.children1.length > 0;
    });
    this.children2.changes.subscribe(() => {
      this.children2Loaded = this.children2.length === expectedChildren2Count;
    });
  }

  onTripListLoaded() {
    this.tripListLoaded = true;
  }

  get allChildrenLoaded(): boolean {
    return this.child1Loaded && this.child2Loaded && this.tripListLoaded;
  }
}

<Ч />

В компоненте trip-list вы можете генерировать событие loaded при загрузке содержимого. Для обработки этого события родительский компонент использует привязку события (см. Разметку выше).

@Output() public loaded: EventEmitter<any> = new EventEmitter();

getTrips() {
    this.fundService.getTrips().subscribe(
      data => { 
        this.trips= data; 
        this.loaded.emit();
      }, 
      err => console.error(err),
      () => console.log(this.trips)
    );
  }

<Ч />

См. Демоверсию этого стека .