如何使用Angular2制作预加载器

本文介绍了如何使用Angular2制作预加载器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 在Angular2中实现预加载器的建议方式是什么？ 如果你在Angular2中谈论spinner，那么你应该考虑下面的答案。 我发现使用Angular2轻松实现spinner实现。为此，我创建了 sharedService 和 sharedObject 。 $ b sharedService有两个方法，即 showLoader（）和 hideLoader（）它负责管理 loader 对象，并将它的 isLoading 属性设置为 true 和 false 。 loader object是 sharedObject 所以如果你改变它的 isLoading 属性为 true 或 false ，主要组件 * ngIf =loader.isLoading code>部分会根据下面的链接显示相应的反应。 Plunker - 带有sharedService和sharedobject的Spinner实现 $ b 注意：有不同的方法来实现微调器。 Yon可以制作微调组件并使用hide / show进行播放。所以还有其他一些简单的方法。事实上，有多种方式来处理微调。 sharedService.ts import {component，Injectable} from'angular2 / core' 导出接口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 从'angular2 / core'导入{Component，bind}; 从'angular2 / router'导入{ROUTER_PROVIDERS，RouteConfig，ROUTER_DIRECTIVES，APP_BASE_HREF，LocationStrategy，RouteParams，ROUTER_BINDINGS}; 从'angular2 / platform / browser'导入{bootstrap}; 从'angular2 / http'导入{HTTP_PROVIDERS}; 导入'rxjs / Rx'; 从'src / cone'导入{ComponentOne}; 从'src / ctwo'中导入{ComponentTwo}; 从'src / myfriends'导入{FriendsList}; 从'src / sharedService'导入{sharedService}; @Component（{选择器：'my-app'，模板：` < style> #mydiv { position：absolute; top：0; left：0; width：100％; height：100％; z-index：1000; background- color：gray; 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.gifclass =ajax-loader/> < / div> < h1>组件路由器< ; / h1> < NAV> < / nav> < router-outlet>< / router-outlet> `，指令：[ROUTER_DIRECTIVES] }） @RouteConfig（[ {path：'/ component-one'，name：'ComponentOne'，component ：ComponentOne}， {path：'/ component-two'，name：'ComponentTwo'，component：ComponentTwo} {path：'/ myfriends'，name：'FriendsList'，component：FriendsList} ]）导出类AppComponent { loader：ILoader; 构造函数（private ss：sharedService） { this.loader = this.ss.loader; } } 自举（AppComponent，[HTTP_PROVIDERS，sharedService， ROUTER_PROVIDERS，绑定（APP_BASE_HREF）.toValue（location.pathname）]）; myFriends.ts 从'angular2 / core'导入{Component，View，CORE_DIRECTIVES}; 从'angular2 / http'导入{Http，Response，HTTP_PROVIDERS}; 导入'rxjs / Rx'; 从'rxjs / Observable'导入{Observable}; 从'src / sharedService'导入{sharedService}; $ b @Component（{ template：`< h1>我的朋友< / h1> < ul> < li * ngFor =＃结果的结果> {{frnd.name}}是{{frnd.age}} years old。< / li> < / ul> `，指令：[CORE_DIRECTIVES] }） 导出类FriendsList { result：Array< Object> ; 构造函数（http：Http，private ss：sharedService）{ this.ss.showLoader（）; this.ss.fetchData（）。subscribe（（result）=> { this.result = result }，（err）=> console.log（err），（）=> { console.log（完成） this.ss.hideLoader（）; }）; } } What is the suggested way to implement a preloader in Angular 2? 解决方案 If you are talking about spinner in Angular2 then you should consider below answer.I found spinner implementation very easy with Angular2. For that, I have created sharedService and sharedObject.sharedService has two methods namely showLoader() and hideLoader() which manages loader object and set its isLoading property to true and false respectively. loader object is a sharedObject so if you change its isLoading property to true or false, main component's *ngIf="loader.isLoading" part will react accordingly as shown here in below link.Plunker - Spinner implementation with sharedService and sharedobjectNOTE : There are different ways to implement spinner. Yon can make spinner component and play with hide/show. So there could be some other easy ways too. In fact there are multiple ways to deal with spinner.sharedService.tsimport {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.tsimport {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(); }); } } 这篇关于如何使用Angular2制作预加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！