Javascript ngIf在路由器出口时角微调器无限循环

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

此应用程序包括一个用于显示微调器的拦截器。为此，我创建了一个带有BehaviorSubject和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 );
  }
}

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

<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>

<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>

我在路由器出口旁边放了一个垫子微调器，包括*ngIf指令，如下所示：

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 );
  }
}

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

<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>

<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>

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

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 );
  }
}

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

<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>

<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的情况下，使外观风格化和美观，但是，我想了解为什么应用程序在这种情况下进入无限循环

欢迎任何帮助

---

谢谢

我真的想知道在这种情况下会发生什么，为什么在我将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>

Quick sanity check，请包括分配加载值的代码。如果它确实是可观察的，而不仅仅是布尔值，那么您需要在*ngIfbilasc01中包含和异步管道，谢谢您的快速回答。。我添加了订阅代码。subscribe中返回的值是布尔值，我可以在console.log中看到。有什么建议吗？请您在问题中添加服务代码好吗？Pankaj谢谢您的回复。。我添加了服务的代码。在拦截器中，我只调用SpinnerService中的函数changeLoadingStatus，在initial中为true，在finalize中为false。是什么触发了对

changeLoadingStatus

的调用？据我所知，路由器出口的存在将影响注入组件的路由（因为它会改变是否委托给子组件），因此，如果您说由于路由更改而调用

changeLoadingStatus

，那么使用

ngIf

保护路由器出口可能会导致一些不可靠的行为。