当ngIf在路由器出口时，角度微调器无限循环

Question

我正在创建一个前端在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 );
}
}

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

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

我在路由器出口旁边放了一个垫子旋转器，其中包括*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();
}
});
}