加載組件/ 4

Question

我創造了4角的應用程序，我想有一個加載組件，使用戶能夠意識到他提交表單和應用程序在做什麼，並且該應用程序正在等待來自後端的信息。

我這樣做是在angularjs通過具有Loader組件和共享的行動，隱藏或顯示使用$ rootScope ......但在angular2/4，我不知道怎樣才能做到這一點。

理想情況下，我需要有一個加載組件，這將是在一個窗體或頁面的某些部分（當屬於該部分的信息被檢索），或者可能在整個屏幕上。

您能給一個關於如何做到這一點的線索？

謝謝！

Answer 1

您將要創建一個可以存儲到您的裝載組件的引用一個加載的服務。然後將該加載服務注入到需要能夠切換該加載組件的其他組件的構造器中。

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(); 
    } 
} 

一定要在你的模塊providers陣列註冊您的LoadingService！

然後在LoadingComponent，你可以注入LoadingService，使LoadingComponent本身可以與LoadingService註冊它應與服務本身註冊：

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

基本上你可以有一個loader組件與loader作爲HTML，您可以從主設備component設置值。像下面這樣，我用material2爲例。

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

組件，你想用你的spinner。

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

    </app-loader> 

而在你的TS只是showLoader值設置爲真/假。

P.S - 確保你照顧它的position和z-index，這樣它就成爲最重要的一切。

Answer 3

這可以幫助你 像輸入類成員

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() { 
} 

} 

，並在模板

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

下在上面的代碼創建一個組件調用加載組件我正在使用semantic-ui框架的loader。你可以使用任何基於你的項目的loader要求。接下來的成分，你必須使用的裝載機，模板只使用加載器組件作爲子組件這樣

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

，並在.TS文件中聲明輸入varaiable爲

loading: boolean = false; 

當你啓動裝載器，才使

this.loading=true 

，併爲您的裝載機將up.To解僱裝載只是讓

this.loading=false; 

這應該做的trick.Its經過精美的here