Angular2でプリローダーを作成する方法

Question

Angular 2でプリローダーを実装するには、どのような方法がありますか？

Answer 1

Angular2のスピナーについて話している場合は、以下の回答を考慮する必要があります。

Angular2では非常に簡単にスピンナの実装が見つかりました。そのために、sharedServiceとsharedObjectを作成しました。

sharedServiceは、二つの方法、すなわちshowLoader()とloaderオブジェクトを管理し、それぞれtrueとfalseにそのisLoadingプロパティを設定hideLoader()を有しています。 loaderオブジェクトがsharedObjectなので、isLoadingプロパティをtrueまたはfalseに変更すると、メインコンポーネントの*ngIf="loader.isLoading"の部分が以下のリンクに示すように反応します。

Plunker - Spinner implementation with sharedService and sharedobject

注：スピナーを実装するためのさまざまな方法があります。 Yonはスピナーコンポーネントを作成し、hide/showで再生できます。だから、他にも簡単な方法があるかもしれない。実際、スピナーを扱うには複数の方法があります。

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

あなたがTHIを試すことができますsのチュートリアル：

記事へのリンク：https://blog.slinto.sk/angular-http-preloaders-3ee7bd937ee0

GitHubのリポジトリ：https://github.com/slinto/ng-preloader-example