Angular Spinner 无限循环，而 ngIf 在路由器出口中

Question

我正在创建一个应用程序，前端使用 Angular，后端使用 Laravel。

此应用程序包含一个用于显示微调器的拦截器。为此，我创建了一个带有BehaviourSubject 和 Observable 的服务，如下所示：

export class SpinnerService {

  private loadingSubject: BehaviorSubject<boolean>;
  public loading: Observable<boolean>;

  constructor(
  ) {
    this.loadingSubject = new BehaviorSubject<boolean>( false );
    this.loading = this.loadingSubject.asObservable();
  }
  changeLoadingStatus(status: boolean) {
    this.loadingSubject.next( status );
  }
}

在组件中，我订阅了这个 Observable 并将值传递给加载变量，如下所示：

this.sSpinner.loading
      .pipe(delay(0)) 
      .subscribe((loading) => {
        this.loading = loading;
        console.log(loading);
      });

我在路由器出口旁边放置了一个 mat-spinner 并包含 *ngIf 指令，如下所示：

<mat-card class="col-md-8 offset-md-2">
    <mat-spinner *ngIf="loading" class="loading-container flex-content-center"> </mat-spinner>
    <router-outlet> </router-outlet>
</mat-card>

这样就可以工作了，但是会显示路线出口和微调器。 如果我使用反向加载参数将 *ngIf 指令放在路由器出口上，以隐藏路由器出口，如下所示：

<mat-card class="col-md-8 offset-md-2">
    <mat-spinner *ngIf="loading" class="loading-container flex-content-center"> </mat-spinner>
    <router-outlet *ngIf=" ! loading"> </router-outlet>
</mat-card>

应用程序进入无限循环，重新加载页面，直到内存溢出。

我知道我可以通过CSS风格化并使外观美观，而无需在路由器出口中使用*ngIf，但是，我想了解应用程序在这种情况下进入无限循环的原因。

欢迎任何帮助。

谢谢！

Answer 1

我真的很想知道在这种情况下会发生什么，为什么当我将 ngIf 指令放入路由器出口时会发生重新加载。但每小时我都会使用 css 来隐藏：

<mat-card class="col-md-8 offset-md-2">
  <mat-spinner *ngIf="loading" class="loading-container flex-content-center"></mat-spinner>

  <div [style.display]="loading ? 'none' : 'block'">
    <router-outlet></router-outlet>
  </div>
</mat-card>

Answer 2

我也遇到这个问题了。 终于用了这个 主布局 html :

<div class="row main-body custom-scrollbar">
    <div [style.display]="showSpinner==true ? 'none' : 'block'" class="col-12 my-4 px-4">
        <router-outlet></router-outlet>
    </div>
</div>

主布局 ts :

import { debounceTime } from 'rxjs';
showSpinner = true;

    ngOnInit(): void {
        this.spinnerService.requestCount$.pipe(debounceTime(1)).subscribe(count => {
            if (count > 0) {
              this.showSpinner = true;
              this.spinnerService.show();
            }
            else {
              this.showSpinner = false;
              this.spinnerService.hide();
            }
          });
      }