Angular Framework – Mounten Sie das Laden durch Abhängigkeitsinjektion, um das globale Laden mit einer Codezeile überall aufzurufen

Vorwort

In diesem Artikel wird hauptsächlich die allgemeine Verwendung des Ladens in Angular-Projekten erläutert und wie das Laden global bereitgestellt wird, sodass eine Codezeile das Laden zum Öffnen und eine Codezeile das Laden zum Schließen steuern kann.

Text

Fügen Sie zunächst die Winkellast hinzu, hauptsächlich auf Komponentenebene und die globale Montage, die im Folgenden vorgestellt werden

1. Die Einführung des Ladens auf Modulebene

Die allgemeine Winkelladebox wird grundsätzlich xxx.module.tsüber importiert. Hier nehme ich den in unserem Projekt verwendeten Devexpress als Beispiel, der in Importe importiert werden kann.
Die offizielle Website von devpress lautet wie folgt:https://js.devexpress.com/

Es wird hauptsächlich in das Modul der jeweiligen Geschäftskomponente eingeführt, und dann kann das Tag in HTML verwendet werden, gesteuert durch Variablen, das Folgende ist die Codeanzeige:

Schreiben Sie dieses Tag einfach direkt in den HTML-Code des Unternehmens

Seine Anzeige und Ausblendung werden hauptsächlich durch die Werte „true“ und „false“ der Variablen „isLoadPanelVisible“ gesteuert. folgendermaßen

Es ist relativ einfach und eine sehr verbreitete Methode zum Verweisen auf Komponentenbibliotheken von Drittanbietern.

Mangel

Wenn Sie viele Module haben, müssen Geschäftsdokumente in jedes Modul eingeführt werden, was zeitaufwändig und mühsam ist, und es handelt sich bei allen um sich wiederholende Codes. Daher habe ich zu diesem Zeitpunkt über das globale Laden nachgedacht
.

Die allgemeinen Ideen sind wie folgt:

1. Ich möchte die globale Komponente über ng mounten. Die globale Komponente ähnlich wie vue importiert den HTML-Code der Komponente nicht direkt in das Unternehmen. Durch die Variablensteuerung habe ich festgestellt, dass Angular dies vorerst nicht unterstützt, und die Einführung ist immer noch sehr mühsam (also habe ich aufgegeben)
2. Der zweite Typ globaler Ladedienste wird in ein Modul exportiert, z. B. das Erstellen eines SharedModule und das anschließende Einfügen des Moduls in Exporte: [CommonModule, ...]. Bei Verwendung werden Importe: [SharedModule] in das entsprechende Modul eingefügt, aber Wir haben zu viele Geschäftsmodule, von denen jedes einmal zitiert werden muss, was sehr mühsam ist (also habe ich aufgegeben).
3. Die dritte Art von globalen Ladediensten wird über Dienstabhängigkeiten in die Hauptdatei app.component.ts eingefügt und nur in das Fenster eingefügt und dort gemountet (ursprünglich wollte man es dort mounten), wobei hauptsächlich das BehaviorSubject von rxjs verwendet wird, um seine Variablen zu ändern Im Folgenden wird eine ausführliche Einführung besprochen

Globales Mount-Laden

Beginnen wir mit einer detaillierten Einführung zum globalen Mount-Laden von Angular:

• Zuerst wollte ich das Laden direkt darauf mounten, aber es schlug fehl. Ich habe den Dienst zwangsweise global hinzugefügt, konnte ihn aber im Geschäft nicht finden. Ich habe den Grund wie folgt überprüft:
  

In Angular können Sie das Schlüsselwort this in der Komponentenklasse verwenden, um Variablen und Methoden zu definieren, und diese Variablen und Methoden werden zu Mitgliedern der Komponente.
Allerdings empfiehlt es sich in Angular grundsätzlich nicht, Variablen oder Methoden direkt darauf zu mounten, sondern diese sollten explizit in der Komponentenklasse als Eigenschaften und Methoden der Komponente deklariert werden. Dieser Ansatz entspricht eher der Typprüfung und der Kompilierungszeitprüfung von TypeScript und ist einfacher zu warten und zu debuggen.
Wenn Sie gemeinsame Zustände oder Dienste in Angular definieren möchten, sollten Sie die Verwendung eines Dienstanbieters in Betracht ziehen. Dieser Ansatz ermöglicht die gemeinsame Nutzung von Daten und Logik in der gesamten Anwendung.

Also habe ich diese Halterung aufgegeben und bin auf die Fensterhalterung umgestiegen.

Das Folgende ist ein Codebeispiel für die Implementierung des globalen Ladens mithilfe von Diensten:

Der erste Schritt besteht darin, eine Servicedatei zu LoadingService.tserstellen

Erstellen Sie zunächst eine neue LoadingService.tsDatei mit folgendem Code:

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

Teil zwei, inapp.component.html

Fügen Sie den folgenden Code zum Laden der Anzeige hinzu.

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

Teil drei, inapp.component.scss

Legen Sie den Ladestil fest
! Notiz! Ich habe den Hintergrund und die URL hier auskommentiert und sie müssen durch die Ladebilder in ihren eigenen Projekten ersetzt werden

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

Teil vier, inapp.component.ts

Mounten Sie im ts der Hauptdatei den gerade geschriebenen LoadingService-Dienst. Der Code lautet wie folgt.

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

Zu diesem Zeitpunkt ist Ihre globale Ladung bereitgestellt und wird in den folgenden Geschäftskomponenten verwendet

Die Verwendung von Geschäftskomponenten ist sehr einfach, nur zwei Codezeilen

• 开始loading:window['nx_loading'].show();
• Laden: window['nx_loading'].hide();

Die Pseudocode-Demo lautet wie folgt:

Sein Anzeigeeffekt ist wie folgt (bewegtes Bild):

zu guter Letzt

Artikel zum Thema Angular finden Sie auf meiner Homepage. Sie können meinen Blog auch wie folgt besuchen

• Einführung in das Angular-Framework: Grundlagen und Verwendung (Volltext 2w8 Wörter) des Front-End-Frameworks Angular
• Benutzerdefinierter Export der Angular-Framework-Tabelle
• meine Blognotizen

Auf Wiedersehen～～～