在angular中使用加载器服务的仪表板上所有小部件的通用加载器

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoaderService {
  private loaderSubject = new BehaviorSubject<boolean>(false);
  loaderState$ = this.loaderSubject.asObservable();

  showLoader() {
    this.loaderSubject.next(true);
  }

  hideLoader() {
    this.loaderSubject.next(false);
  }
}

import { Component, OnInit } from '@angular/core';
import { LoaderService } from './loader.service';

@Component({
  selector: 'app-widget',
  template: `
    <div *ngIf="isLoading" class="loader">Loading...</div>
    <div *ngIf="!isLoading">
      <!-- Your widget content here -->
    </div>
  `
})
export class WidgetComponent implements OnInit {
  isLoading: boolean;

  constructor(private loaderService: LoaderService) {}

  ngOnInit() {
    this.loaderService.loaderState$.subscribe(state => {
      this.isLoading = state;
    });
  }

  someAsyncOperation() {
    this.loaderService.showLoader();
    // Perform your async operation here
    setTimeout(() => {
      this.loaderService.hideLoader();
    }, 2000); // Simulating an async operation
  }
}

import { Component, OnInit } from '@angular/core';
import { LoaderService } from './loader.service';

@Component({
  selector: 'app-dashboard',
  template: `
    <div *ngIf="isLoading" class="global-loader">Global Loading...</div>
    <app-widget *ngFor="let widget of widgets" [widget]="widget"></app-widget>
  `
})
export class DashboardComponent implements OnInit {
  widgets = [/* your widget data */];
  isLoading: boolean;

  constructor(private loaderService: LoaderService) {}

  ngOnInit() {
    this.loaderService.loaderState$.subscribe(state => {
      this.isLoading = state;
    });
  }
}