Laden Komponente in Angular2/4

Question

Ich erstelle eine App in eckigen 4 und ich möchte eine Ladekomponente haben, so dass der Benutzer erkennen kann, dass er ein Formular einreichen und die App tut etwas, und dass die App wartet Informationen aus dem Backend.

Ich habe es in angularjs durch eine Lader-Komponente und teilen die Aktion zu verbergen oder zeigen Sie mit der $ rootScope ... Aber in angular2/4 sehe ich nicht, wie ich das tun kann.

Idealerweise muss ich eine Ladekomponente haben, die über ein Formular oder einen Abschnitt der Seite (wenn die Information, die zu diesem Abschnitt gehört) abgerufen wird, oder vielleicht über den gesamten Bildschirm.

Könnten Sie bitte einen Hinweis geben, wie Sie dies tun können?

Danke!

Answer 1

Sie möchten einen Ladedienst erstellen, der einen Verweis auf Ihre Ladekomponente speichern kann. Dann fügen Sie diesen Ladedienst in den Konstruktor anderer Komponenten ein, die in der Lage sein müssen, diese Ladekomponente umzuschalten.

import { Injectable } from '@angular/core'; 
import { LoadingComponent } from './loading.component'; 

@Injectable() 
export class LoadingService { 
    private instances: {[key: string]: LoadingComponent} = {}; 

    public registerInstance(name: string, instance: LoadingComponent) { 
    this.instances[name] = instance; 
    } 

    public removeInstance(name: string, instance: LoadingComponent) { 
    if (this.instances[name] === instance) { 
     delete this.instances[name]; 
    } 
    } 

    public hide(name: string) { 
    this.instances[name].hide(); 
    } 

    public show(name: string) { 
    this.instances[name].show(); 
    } 
} 

Seien Sie sicher, dass Ihre LoadingService in Ihrem Moduls providers Array registrieren!

Dann in der LoadingComponent können Sie die LoadingService, injizieren, so dass die LoadingComponent sich mit dem LoadingService registrieren kann sie sich mit diesem Dienst registrieren sollten:

import { Component, OnInit, Input, OnDestroy } from '@angular/core'; 
import { LoadingService } from './loading.service'; 

@Component({ 
    selector: 'yourapp-loading', 
    templateUrl: './loading.component.html', 
    styleUrls: ['./loading.component.scss'] 
}) 
export class LoadingComponent implements OnInit, OnDestroy { 
    @Input() name: string; 
    private isVisible = false; 

    constructor(private service: LoadingService) {} 

    ngOnInit() { 
    if (this.name) { 
     this.service.registerInstance(this.name, this); 
    } 
    } 

    ngOnDestroy() { 
    if (this.name) { 
     this.service.removeInstance(this.name, this); 
    } 
    } 

    /* ... code to show/hide this component */ 
} 

Answer 2

Grundsätzlich können Sie mit der loader eine loader Komponente als HTML und Sie können den Wert vom Master component setzen. Etwas wie unten habe ich material2 als Beispiel verwendet.

Ihre spinner.ts

import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'app-loader', 
    templateUrl: './loader.component.html', 
    styleUrls: ['./loader.component.css'] 
}) 
export class LoaderComponent{ 
    @Input() show:boolean; 
} 

HTML:

<div *ngIf="show"> 
     <md-spinner></md-spinner> 
    </div> 

Komponente, wo Sie möchten Ihre spinner verwenden.

<app-loader [show]="showLoader"> 

    </app-loader> 

Und in Ihrem TS nur den Wert von showLoader auf true/false gesetzt.

P.S. sorgen Sie dafür, dass Sie auf seine position und z-index so aufpassen, dass es auf alles kommt.

Answer 3

Diese helfen können Sie eine Komponente namens Befüllungskomponenten wie folgende mit einem Eingangsklasse Mitglied

import { Component, OnInit,Input } from '@angular/core'; 

@Component({ 
selector: 'app-loader', 
templateUrl: './loader.component.html', 
styleUrls: ['./loader.component.css'] 
}) 
export class LoaderComponent implements OnInit { 
@Input() loading: boolean = false; 
constructor() { } 

ngOnInit() { 
} 

} 

und in der Vorlage

<div class="ui " *ngIf="loading"> 
 
    <div class="ui active dimmer"> 
 
    <div class="ui large text loader">Loading</div> 
 
    </div> 
 
    <p></p> 
 
</div>

In dem obigen Code erstellen Ich benutze den Loader von semantic-ui frameworks. Sie können jeden Loader basierend auf Ihrem Projekt verwenden Anforderung.Als nächstes werden in der Komponente, wo Sie den Lader verwenden, in der Vorlage nur die Loader-Komponente als untergeordnete Komponente verwenden, wie dieses

<div class="center"> 
 
    <app-loader [loading]="loading"></app-loader> 
 
</div>

und in der .ts-Datei deklarieren den Eingang varaiable als

loading: boolean = false; 

Wenn Sie den loader starten, stellen Sie nur

this.loading=true 

und Ihren Lader wird up.To Laden entlassen werden nur

this.loading=false; 

machen dieses trick.Its schön in here