Come eseguire un preloader con Angular2

Question

Qual è il modo suggerito per implementare un preloader in Angular 2?

Answer 1

Se si parla di spinner in Angular2, è necessario considerare la risposta di seguito.

Ho trovato molto facile l'implementazione dello spinner con Angular2. Per quello, ho creato sharedService e sharedObject.

sharedService ha due metodi cioè showLoader() e hideLoader() che gestisce loader oggetto e impostare la proprietà isLoading a true e false rispettivamente. L'oggetto loader è un sharedObject quindi se si modifica la proprietà isLoading a true o false, la parte *ngIf="loader.isLoading" del componente principale reagirà di conseguenza come mostrato di seguito nel collegamento.

Plunker - Spinner implementation with sharedService and sharedobject

NOTA: Ci sono diversi modi per implementare filatrice. Puoi creare il componente spinner e giocare con hide/show. Quindi potrebbero esserci anche altri semplici modi. In effetti ci sono diversi modi per gestire lo spinner.

sharedService.ts

import {Component, Injectable} from 'angular2/core' 

export interface ILoader { 
    isLoading:boolean=false; 
} 

@Injectable() 
export class sharedService { 
    loader:ILoader={isLoading:false}; 
    showLoader() 
    { 
    console.log('showloader started'); 
    this.loader.isLoading=true; 
    } 
    hideLoader() 
    { 
    this.loader.isLoading=false; 
    } 
} 

boot.ts

import {Component,bind} from 'angular2/core'; 
import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router'; 
import {bootstrap}  from 'angular2/platform/browser'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 
import 'rxjs/Rx'; 

import{ComponentOne} from 'src/cone'; 
import{ComponentTwo} from 'src/ctwo'; 
import{FriendsList} from 'src/myfriends'; 
import {sharedService} from 'src/sharedService'; 

@Component({ 
    selector: 'my-app', 
    template: ` 

    <-- html required for spinner ------------------------> 

    <style> 
    #mydiv { 
     position:absolute; 
     top:0; 
     left:0; 
     width:100%; 
     height:100%; 
     z-index:1000; 
     background-color:grey; 
     opacity: .8; 
    } 

    .ajax-loader { 
     position: absolute; 
     left: 50%; 
     top: 50%; 
     margin-left: -32px; /* -1 * image width/2 */ 
     margin-top: -32px; /* -1 * image height/2 */ 
     display: block;  
    } 

    </style> 

    <div id="mydiv" *ngIf="loader.isLoading"> 
    <img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/> 
    </div> 

    <-- til here for spinner ------------------------> 

    <h1>Component Router</h1> 
    <nav> 
     <a [routerLink]="['ComponentOne']">One</a><hr/> 
     <a [routerLink]="['ComponentTwo']">Two</a><hr/> 
     <a [routerLink]="['FriendsList']">Friends</a> 
    </nav> 
    <router-outlet></router-outlet> 
`, 
    directives: [ROUTER_DIRECTIVES] 
}) 
@RouteConfig([ 
    {path:'/component-one', name: 'ComponentOne', component: ComponentOne}, 
    {path:'/component-two', name: 'ComponentTwo', component: ComponentTwo} 
    {path:'/myfriends', name: 'FriendsList', component:FriendsList} 
]) 
export class AppComponent { 
    loader:ILoader; 
    constructor(private ss:sharedService) 
    { 
    this.loader=this.ss.loader; 
    } 

} 

bootstrap(AppComponent, [HTTP_PROVIDERS,sharedService, 
     ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname) 
]); 

myFriends.ts

import {Component,View,CORE_DIRECTIVES} from 'angular2/core'; 
import {Http, Response,HTTP_PROVIDERS} from 'angular2/http'; 
import 'rxjs/Rx'; 
import {Observable} from 'rxjs/Observable'; 
import {sharedService} from 'src/sharedService'; 

@Component({ 
    template: ` 
    <h1>My Friends</h1> 
    <ul> 
     <li *ngFor="#frnd of result"> 
      {{frnd.name}} is {{frnd.age}} years old. 
     </li> 
    </ul> 
    `, 
    directive:[CORE_DIRECTIVES] 

    }) 

    export class FriendsList{ 

     result:Array<Object>; 

     constructor(http: Http,private ss:sharedService) { 

      this.ss.showLoader(); 

      this.ss.fetchData().subscribe((result) =>{ 
        this.result =result 
        }, 
        (err)=>console.log(err), 
        ()=>{ 
          console.log("Done") 
          this.ss.hideLoader(); 
        }); 
     } 
    } 

Answer 2

Si può provare Thi s tutorial:

articolo link: https://blog.slinto.sk/angular-http-preloaders-3ee7bd937ee0

GitHub Repository: https://github.com/slinto/ng-preloader-example