Angular 向Anguar 17项目添加服务以启动和停止LoaderNGXUILoader

我正在运行独立组件的Angular 17项目. 我想添加一个服务，在该服务中我将启动和停止NGX-UI-Loader( https://www.npmjs.com/package/ngx-ui-loader). 我不能像老版本那样在根ngxui加载程序中提供普通的模块，所以我想知道这是否可以在Angular17中工作？ 当在独立组件中直接调用和导入加载器时，加载器可以正常工作.

当前实施不起作用..

服务代码:

import { Injectable, inject } from '@angular/core';
import { NgxUiLoaderService } from 'ngx-ui-loader';

@Injectable({
  providedIn: 'root',
})
export class LoaderService {
//   ngxLoader = inject(NgxUiLoaderService);
  ngxLoader = inject(NgxUiLoaderService);

  startLoader() {
    console.error('start');
    console.error(this.ngxLoader);
    this.ngxLoader.start();
  }

  stopLoader() {
    this.ngxLoader.stop();
  }


  loaderConfig =
  {
    "bgsColor": "red",
    "bgsOpacity": 0.5,
    "bgsPosition": "bottom-right",
    "bgsSize": 60,
    "bgsType": "ball-spin-clockwise",
    "blur": 5,
    "delay": 0,
    "fastFadeOut": true,
    "fgsColor": "red",
    "fgsPosition": "center-center",
    "fgsSize": 60,
    "fgsType": "ball-spin-clockwise",
    "gap": 24,
    "logoPosition": "center-center",
    "logoSize": 120,
    "logoUrl": "",
    "masterLoaderId": "master",
    "overlayBorderRadius": "0",
    "overlayColor": "rgba(40, 40, 40, 0.8)",
    "pbColor": "red",
    "pbDirection": "ltr",
    "pbThickness": 3,
    "hasProgressBar": true,
    "text": "",
    "textColor": "#FFFFFF",
    "textPosition": "center-center",
    "maxTime": -1,
    "minTime": 300
  }
}

AppComponent.ts

`import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavbarComponent } from './components/navbar/navbar.component';
import { NgxUiLoaderModule, NgxUiLoaderService } from 'ngx-ui-loader';
import { LoginComponent } from './components/login/login.component';
import { UserService } from './services/user.service';
import { StorageService } from './services/storage.service';
import { finalize, first } from 'rxjs';
import { LoaderService } from './services/loader.service';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  imports: [CommonModule, NavbarComponent, NgxUiLoaderModule, LoginComponent],
})
export class AppComponent {
  title = 'CinAppClient';
  userService = inject(UserService);
  storageService = inject(StorageService);
  ngxLoaderService = inject(NgxUiLoaderService);
  loaderService = inject(LoaderService);

  user$ = this.userService.user$;
  constructor() {}

  ngOnInit() {
    this.loaderService.startLoader();
    let storageUser = this.storageService.getUser();
    if (storageUser !== null) {
      this.userService.authToken = storageUser.token;
      this.userService
        .refreshToken()
        .pipe(
          first(),
          finalize(() => this.loaderService.stopLoader())
        )
        .subscribe();
    }
  }
}
type here

AppComponent.html

<ngx-ui-loader [bgsType]="'three-strings'" [fgsType]="'three-strings'">
</ngx-ui-loader>`
type here