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 - 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

您可以尝试本教程：

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

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

如何使用Angular2制作预加载器

2 个答案: