如何使用Angular2制作预加载器 [英] How to make a preloader with Angular2
问题描述
在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'，
模板：`
< - html需要spinner --- --------------------->
< 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 sharedobject
NOTE : 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.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();
});
}
}
这篇关于如何使用Angular2制作预加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
