не может переключаться между компонентами в угловых

Question

Я пытаюсь переключаться между двумя компонентами в моем угловом приложении, моя цель состоит в том, чтобы, во-первых, когда страница все еще загружалась, предварительный загрузчик будет отображаться до тех пор, пока страницы не загрузятся полностью, тогда переменная предварительного загрузчика изменится сtrue to false, тогда второй компонент начнет отображаться.

Но когда я попробовал это, я получил эту ошибку

Ошибка: ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после того, как было проверено. Предыдущее значение: «скрыто: правда». Текущее значение: «скрыто: ложь». at viewDebugError

вот мой код для home.component.html

<app-preloader *ngIf="preloader; else Notpreloader"></app-preloader>

<ng-template #Notpreloader> 
    <div>
       ......
    </div>
</ng-template>

вот код для home.component.ts

import { Component, OnInit, AfterViewInit, ChangeDetectorRef, AfterContentChecked } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, AfterViewInit, AfterContentChecked {  
  constructor(private changeDetector: ChangeDetectorRef) { }

  ngAfterContentChecked(): void {
    this.changeDetector.detectChanges();
  }

  preloader=true  
    ngAfterViewInit() {
        this.preloader=false
  }

  ngOnInit() { 
  }

}

как я могу избавиться от этой ошибки и заставить ее работать так, как я хочу, чтобы, когда страница закончила загрузку, она скрыла компоненты предварительного загрузчика и загрузила главную страницу этой страницы?

Answer 1

Я не знаю, почему вы не хотите принудительно запускать загрузчик, если у вас нет таких вещей, как асинхронные вызовы или тому подобное, но есть попытка:

main.component.html

<div *ngIf="componentIsReady; else loadingPlaceholder">
   ....
</div>
<ng-template #loadingPlaceholder>
   ... 
</ng-template>

main.component.ts

export class MainComponent implements ngOnInit {
    ...
    componentIsReady = false;

    ngOnInit() {

        setTimeout(() => {
           this.componentIsReady = true;
        }, 500)
    }
}

ПРИМЕЧАНИЕ : если это не сработает, вы можете поставить @ Output в AppPreloaderComponent , и он выдаст логическое значение, сообщающее родителю, что он готов , тогда вам нужно только перехватить это испущенное событие (от вашего потомка AppPreloaderComponent)на родителя (HomeComponent) и все.

Answer 2

оберните preloader в вашем ngAfterinit с установленным тайм-аутом. ну как то так

ngAfterViewInit() {
  setTimeout(() => {
  this.preloader = false;
  }, 0);
 }