javascript - 如何使用 Angular2 制作预加载器

Question

在 Angular 2 中实现预加载器的建议方法是什么？

Answer 1

如果您在谈论 Angular2 中的微调器，那么您应该考虑以下答案。

我发现使用 Angular2 很容易实现微调器。为此，我创建了 sharedService 和 sharedObject。

sharedService 有两个方法 showLoader() 和 hideLoader() 管理 loader 对象并设置它的 isLoading 属性分别设置为 true 和 false。 loader 对象是一个 sharedObject 因此如果您将其 isLoading 属性更改为 true 或 false，主要组件的 *ngIf="loader.isLoading" 部分将做出相应的 react ，如下面的链接所示。

Plunker - Spinner implementation with sharedService and sharedobject

注意:有多种方法可以实现微调器。你可以制作微调器组件并玩隐藏/显示。所以也可能有其他一些简单的方法。事实上，有多种方法可以处理微调器。

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