问题是由于ngIf指令造成的。ngIf指令是基于条件显示和隐藏DOM元素的，当表达式值为false时，元素被删除，当值变为true时，元素被添加。然而，当ngIf切换时，Angular会销毁并重建该元素的所有子组件，包括Spinner组件，这导致了无限循环。

解决方法是在spa-spinner组件的容器元素上绑定一个样式，并在引导应用程序时将此样式添加到head中。这将避免Angular重建此组件。例如，我们可以通过在index.html文件中添加以下代码来解决问题：

然后在app.component.ts中，将以下代码添加到app组件类中以显示或隐藏Spinner：

import { NavigationEnd, Router } from '@angular/router';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    

      
    
    
  `,
})
export class AppComponent {
  constructor(private router: Router) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        const container = document.querySelector('.spinner-container');
        container.setAttribute('style', 'display: none !important;');
   }
  }
}

这将确保仅在导航结束时才隐藏Spinner。现在，我们可以使用 ngSwitch 或 show-spinner directive 替换ngIf指令，并避免Angular重建Spinner组件。