从任何组件的ngOnInit（）调用它时，使用加载程序组件获取ExpressionChangedAfterItHasBeenCheckedError

Question

我有一个带有加载程序组件的Angular应用程序。它工作正常，但是从任何组件的ngOnInit（）调用它时，我都会遇到ExpressionChangedAfterItHaHasBeenCheckedError。这是我的代码：

loader.component.ts：

@Component({
  selector: 'csm-loader',
  template: `<div [hidden]="!isLoading"><i class="fas fa-cog fa-spin fa-3x"></i> <span>{{message}}</span></div>`
})
export class LoaderComponent {
  @Input() isLoading = false;
  @Input() message: string;

  constructor() { }
}

loader.service.ts：

@Injectable({
  providedIn: 'root'
})
export class LoaderService {
  loading = false;

  constructor() { }

  start() {
    this.loading = true;
  }

  stop() {
    this.loading = false;
  }

  isLoading() {
    return this.loading;
  }
}

app.component.ts：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent  implements OnInit {
    ...

    constructor(
    ...
    private loaderService: LoaderService
  ) { }

  ...
}

app.component.html：

...
<csm-loader *ngIf="loaderService.isLoading()" [isLoading]="loaderService.isLoading()"></csm-loader>

然后，如果我从某个组件的this.loaderService.start();调用ngOnInit()可以正常工作，但是出现以下控制台错误： 错误错误：ExpressionChangedAfterItHasBeenCheckedError：检查表达式后，表达式已更改。先前的值：'ngIf：false'。当前值：“ ngIf：true”。

如何解决该错误？