Framework angulaire - chargement du montage via l'injection de dépendances pour appeler le chargement global avec une ligne de code n'importe où

avant-propos

Cet article explique principalement l'utilisation courante du chargement dans les projets angulaires et comment monter le chargement globalement, de sorte qu'une ligne de code puisse contrôler le chargement à l'ouverture et une ligne de code puisse contrôler le chargement à la fermeture.

texte

Tout d'abord, ajoutez le chargement dans le montage angulaire, principalement au niveau des composants et global, qui sont présentés ci-dessous

1. L'introduction du chargement au niveau du module

La boîte de chargement angulaire commune est essentiellement xxx.module.tsimportée via .Ici, je prendrai le devexpress utilisé dans notre projet comme exemple, qui peut être importé dans les importations.
Le site officiel de devpress est le suivant :https://js.devexpress.com/

Il est principalement introduit dans le module des composants métier respectifs, puis la balise peut être utilisée en HTML, contrôlée par des variables, voici l'affichage du code :

Dans le html de l'entreprise, il suffit d'écrire directement cette balise

Son affichage et son masquage sont principalement contrôlés par le vrai et le faux de la variable isLoadPanelVisible. comme suit

C'est relativement simple et c'est un moyen très courant de référencer des bibliothèques de composants tiers.

défaut

Si vous avez beaucoup de modules, il faut introduire des documents métiers dans chaque module, ce qui est chronophage et laborieux, et ce sont tous des codes répétitifs, alors à ce moment, j'ai pensé au chargement global
.

Les idées générales sont les suivantes :

1. Je souhaite monter le composant global via ng.Le composant global similaire à vue n'importe pas directement le code HTML du composant dans l'entreprise.Grâce au contrôle des variables, j'ai constaté qu'angular ne le prend pas en charge pour le moment, et l'introduction est toujours très gênant (donc j'ai abandonné)
2. Le deuxième type de service de chargement global est exporté dans un module, comme la création d'un module partagé, puis la mise du module dans les exportations : [ModuleCommun, ...]. Lors de son utilisation, importe : [Module partagé] dans le module respectif, mais Nous avons trop de modules métier, dont chacun doit être cité une fois, ce qui est très gênant (donc j'ai abandonné)
3. Le troisième type de service de chargement global est injecté dans le app.component.ts principal via des dépendances de service, et uniquement injecté et monté sur la fenêtre (initialement voulu monter sur cela), en utilisant principalement BehaviorSubject de rxjs pour modifier ses variables, ce qui être discuté ci-dessous introduction détaillée

Chargement de montage global

À propos du chargement de montage global d'angular, commençons par une introduction détaillée :

• Au début, je voulais monter le chargement directement dessus, mais cela a échoué. J'ai ajouté de force le service à ceci globalement, mais je ne l'ai pas trouvé dans les affaires. J'ai vérifié la raison, comme suit :
  

Dans Angular, vous pouvez utiliser le mot clé this dans la classe du composant pour définir des variables et des méthodes, et ces variables et méthodes deviendront membres du composant.
Cependant, dans Angular, il n'est généralement pas recommandé de monter des variables ou des méthodes directement dessus, mais elles doivent être explicitement déclarées dans la classe du composant en tant que propriétés et méthodes du composant. Cette approche est plus conforme à la vérification de type et à la vérification au moment de la compilation de TypeScript, et est plus facile à maintenir et à déboguer.
Si vous souhaitez définir un état ou des services partagés dans Angular, vous devez envisager d'utiliser un fournisseur de services pour le faire. Cette approche permet aux données et à la logique d'être partagées dans toute l'application.

J'ai donc abandonné ce support et je suis passé au support de fenêtre.

Voici un exemple de code pour implémenter le chargement global à l'aide de services :

La première étape consiste à créer un LoadingService.tsfichier de service

Créez d'abord un nouveau LoadingService.tsfichier avec le code suivant :

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$;
  }
}

Deuxième partie, enapp.component.html

Ajoutez le code suivant pour charger l'affichage.

<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>

Troisième partie, enapp.component.scss

Définissez le style de chargement
 ! Avis! J'ai commenté l'arrière-plan et l'URL ici, et ils doivent être remplacés par les images de chargement dans leurs propres projets

.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;
}

Quatrième partie, enapp.component.ts

Dans le ts du fichier principal, montez le service LoadingService que vous venez d'écrire, le code est le suivant.

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
	}
}

À ce stade, votre chargement global est monté et il sera utilisé dans les composants métier ci-dessous

L'utilisation des composants métier est très simple, seulement deux lignes de code

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

La démo de pseudocode est la suivante :

Son effet d'affichage est le suivant (image animée):

enfin

Pour les articles sur angular, vous pouvez consulter ma page d'accueil. Vous pouvez également visiter mon blog comme suit

• Angular framework introduction basics and use (full text 2w8 words) front-end framework angular
• Exportation personnalisée de table de cadre angulaire
• mes notes de blog

au revoir～～～