Comment faire un preloader avec Angular2

Si vous parlez spinner Angular2 alors vous devriez envisager d'-dessous de la réponse.

J'ai trouvé spinner mise en œuvre très facile avec Angular2. Pour cela, j'ai créé sharedService et sharedObject.

sharedService a deux méthodes à savoir showLoader() et hideLoader() qui gère loader objet et de définir sa isLoading propriété true et false respectivement. loader objet est un sharedObject donc, si vous modifiez ses isLoading propriété true ou false, principale composante de l' *ngIf="loader.isLoading" partie réagira en conséquence comme indiqué ici dans le lien ci-dessous.

Plunker Toupie de mise en œuvre avec sharedService et sharedobject

REMARQUE : Il existe différentes façons de mettre en œuvre spinner. Yon peut faire spinner composant et de jouer avec les cacher/montrer. Il pourrait donc y avoir d'autres moyens faciles aussi. En fait il y a plusieurs façons de traiter avec 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;
  }
} 

de démarrage.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();
});
}
}