如何使用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"部分将作出相应的反应，如下面的链接所示。

Plunker - 使用sharedService和sharedobject实现Spinner

注意：有不同的方法来实现微调器。 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

你可以试试这个教程：

文章链接： https ： //blog.slinto.sk/angular-http-preloaders-3ee7bd937ee0

GitHub存储库： https ： //github.com/slinto/ng-preloader-example