Marco angular: monte la carga a través de la inyección de dependencia para llamar a la carga global con una línea de código en cualquier lugar

prefacio

Este artículo explica principalmente el uso común de la carga en proyectos angulares y cómo montar la carga globalmente, de modo que una línea de código pueda controlar la carga para abrir y una línea de código pueda controlar la carga para cerrar.

texto

Primero, agregue la carga en el montaje angular, principalmente a nivel de componente y global, que se presentan a continuación

1. La introducción de la carga a nivel de módulo.

El cuadro de carga angular común se xxx.module.tsimporta básicamente a través de Aquí tomaré como ejemplo el devexpress utilizado en nuestro proyecto, que se puede importar en las importaciones.
El sitio web oficial de devpress es el siguiente:https://js.devexpress.com/

Se introduce principalmente en el módulo de los respectivos componentes comerciales, y luego la etiqueta se puede usar en HTML, controlada por variables, la siguiente es la visualización del código:

En el html de la empresa, solo escriba esta etiqueta directamente

Su visualización y ocultación están controladas principalmente por el verdadero y falso de la variable isLoadPanelVisible. como sigue

Es relativamente simple y es una forma muy común de hacer referencia a bibliotecas de componentes de terceros.

defecto

Si tiene muchos módulos, los documentos comerciales deben introducirse en cada módulo, lo que requiere mucho tiempo y es laborioso, y todos ellos son códigos repetitivos. Entonces, en este momento, pensé en la carga global
.

Las ideas generales son las siguientes:

1. Quiero montar el componente global a través de ng. El componente global similar a vue no importa directamente el html del componente en el negocio. A través del control de variables, descubrí que angular no lo admite por el momento, y la introducción es Todavía muy problemático (así que me di por vencido)
2. El segundo tipo de servicio de carga global se exporta en un módulo, como crear un módulo compartido y luego poner el módulo en exportaciones: [CommonModule, ...]. Al usarlo, importa: [sharedModule] en el módulo respectivo, pero Tenemos demasiados módulos comerciales, cada uno de los cuales debe citarse una vez, lo cual es muy problemático (así que me di por vencido)
3. El tercer tipo de servicio de carga global se inyecta en el app.component.ts principal a través de las dependencias del servicio, y solo se inyecta y luego se monta en la ventana (inicialmente se quería montar en esto), principalmente usando el BehaviorSubject de rxjs para cambiar sus variables, que se discutirá a continuación introducción detallada

Carga de montaje global

Acerca de la carga de montaje global de angular, comencemos con una introducción detallada:

• Al principio quería montar la carga directamente en esto, pero falló. Agregué a la fuerza el servicio a esto globalmente, pero no pude encontrarlo en el negocio. Verifiqué el motivo de la siguiente manera:
  

En Angular, puede usar la palabra clave this en la clase de componente para definir variables y métodos, y estas variables y métodos se convertirán en miembros del componente.
Sin embargo, en Angular, generalmente no se recomienda montar variables o métodos directamente en esto, pero deben declararse explícitamente en la clase del componente como propiedades y métodos del componente. Este enfoque está más en línea con la verificación de tipos y la verificación en tiempo de compilación de TypeScript, y es más fácil de mantener y depurar.
Si desea definir servicios o estados compartidos en Angular, debe considerar usar un proveedor de servicios para hacerlo. Este enfoque permite que los datos y la lógica se compartan en toda la aplicación.

Así que renuncié a este soporte y cambié al soporte de ventana.

El siguiente es un ejemplo de código para implementar la carga global mediante servicios:

El primer paso es crear un LoadingService.tsarchivo de servicio.

Primero crea un nuevo LoadingService.tsarchivo con el siguiente código:

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

@Injectable({
    
    
  providedIn: 'root'
})
export class LoadingService {
    
    
  private isLoading$ = new BehaviorSubject<boolean>(false);
  private message$ = new BehaviorSubject<string>('正在加载中...');

  constructor() {
    
    }

  show(): void {
    
    
    this.isLoading$.next(true);
  }

  hide(): void {
    
    
    this.isLoading$.next(false);
  }
  setMessage(message: string): void {
    
    
    this.message$.next(message);
  }

  get isLoading(): BehaviorSubject<boolean> {
    
    
    return this.isLoading$;
  }
  get message(): BehaviorSubject<string> {
    
    
    return this.message$;
  }
}

Segunda parte, enapp.component.html

Agregue el siguiente código para cargar la pantalla.

<div *ngIf="loadingService.isLoading | async" class="loading-overlay">
    <div class="spinner"></div>
    <div *ngIf="loadingService.message | async" class="loading-message">{
    
    {
    
    loadingService.message.getValue()}}</div>
</div>

Tercera parte, enapp.component.scss

¡Establece el estilo de carga
! ¡Aviso! Comenté el fondo y la URL aquí, y deben reemplazarse con las imágenes de carga en sus propios proyectos.

.loading-overlay {
    
    
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.spinner {
    
    
  width: 150px;
  height: 150px;
  border-top: 4px solid #fff;
  border-bottom: 4px solid #fff;
  border-left: 4px solid rgba(255, 255, 255, 0.2);
  border-right: 4px solid rgba(255, 255, 255, 0.2);
  animation: spin 1s linear infinite;
//   background:url("src/assets/img/logo.1.gif") no-repeat center center;
  background-size: cover;
}

.loading-message {
    
    
  color: #fff;
  font-size: 14px;
  margin-top: 10px;
  display: block;
}

cuarta parte, enapp.component.ts

En los ts del archivo principal, monte el servicio LoadingService recién escrito, el código es el siguiente.

import {
    
     Component } from '@angular/core';
import {
    
     LoadingService } from './loading.service';

@Component({
    
    
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    
    
	//依赖注入
	constructor(public loadingService: LoadingService) {
    
    
		//挂载到window上
		window['nx_loading']=this.loadingService
	}
}

En este punto, su carga global está montada y se usará en los componentes comerciales a continuación

El uso de los componentes de negocio es muy simple, solo dos líneas de código

• 开始cargando：ventana['nx_loading'].show();
• 关闭cargando：window['nx_loading'].hide();

La demostración del pseudocódigo es la siguiente:

Su efecto de visualización es el siguiente (imagen en movimiento):

por fin

Para artículos sobre angular, puede ver mi página de inicio. También puedes visitar mi blog de la siguiente manera

• Angular framework introducción conceptos básicos y uso (texto completo 2w8 palabras) front-end framework angular
• Exportación personalizada de tabla de marco angular
• mis notas de blog

adiós～～～