在融合图Angular 8中添加数据加载消息

，可以通过以下几个步骤实现：

创建一个数据加载服务：首先，在Angular项目中创建一个名为DataLoadingService的服务。该服务将负责控制数据加载消息的显示和隐藏。

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

@Injectable({
  providedIn: 'root'
})
export class DataLoadingService {
  private loadingSubject = new BehaviorSubject<boolean>(false);
  public loading$ = this.loadingSubject.asObservable();

  constructor() { }

  showLoading() {
    this.loadingSubject.next(true);
  }

  hideLoading() {
    this.loadingSubject.next(false);
  }
}

创建一个数据加载指示器组件：接下来，在项目中创建一个名为DataLoadingIndicatorComponent的组件，用于显示数据加载的消息。

<div *ngIf="loading$ | async" class="loading-indicator">
  <div class="spinner"></div>
  <div class="message">数据加载中...</div>
</div>

.loading-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  /* 添加你喜欢的加载动画样式 */
}

.message {
  color: white;
  font-size: 18px;
}

在需要加载数据的组件中使用服务和指示器：现在，你可以在任何需要加载数据的组件中使用DataLoadingService来显示和隐藏加载消息。

import { Component } from '@angular/core';
import { DataLoadingService } from './data-loading.service';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="loadData()">加载数据</button>
  `
})
export class MyComponent {
  constructor(private dataLoadingService: DataLoadingService) { }

  loadData() {
    this.dataLoadingService.showLoading();
    // 模拟异步加载数据
    setTimeout(() => {
      this.dataLoadingService.hideLoading();
      // 处理加载完成后的逻辑
    }, 2000);
  }
}

在根组件中添加数据加载指示器：最后，在根组件的模板中添加DataLoadingIndicatorComponent，以便在整个应用程序中都能显示加载消息。

<app-data-loading-indicator></app-data-loading-indicator>

通过以上步骤，你现在可以在融合图Angular 8中添加数据加载消息。当你需要加载数据时，调用DataLoadingService的showLoading方法显示加载消息，加载完成后调用hideLoading方法隐藏加载消息。在整个应用程序中，将会有一个居中显示的加载指示器，告诉用户数据正在加载中。