在Angular 2中實現預加載器的建議方式是什麼?如何使用Angular2製作預加載器
5
A
回答
8
如果您在Angular2中討論spinner,那麼您應該考慮下面的答案。
我發現使用Angular2的spinner實現非常簡單。爲此,我創建了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();
});
}
}
2
你可以試試THI的教程:
文章鏈接:https://blog.slinto.sk/angular-http-preloaders-3ee7bd937ee0
相關問題
- 1. 如何使用加載外部文件製作預加載器?
- 2. 如何製作預加載器頁面
- 3. 如何使用外部預加載器預加載網頁?
- 4. Angular2 - 如何添加加載微調器?
- 5. 如何在Flash中使用外部swf作爲預加載器
- 6. 如何使用SVG的inital Angular2加載
- 7. 如何使用CDN和SystemJS加載angular2
- 8. 如何爲飛鏢中的網頁製作預加載器
- 9. 從控制器加載時圖像預加載不工作
- 10. 如何在angular2中使用微調器加載圖像
- 11. 如何添加預加載器
- 12. 如何使用Angular2路由器製作Gmail之類的URL?
- 13. 如何使用jQuery預加載圖像
- 14. 如何使用Three.js預加載紋理?
- 15. 如何使用laravel預先加載
- 16. 使用JSON製作Angular2 POST
- 17. 如何使用導航控制器加載tabbar控制器xib
- 18. 如何在angular2中預加載配置文件
- 19. 我如何緩存/預先加載Angular2 webapp的所有圖像?
- 20. 使用Javascript創建PDF預加載器
- 21. Laravel制約預先加載不工作
- 22. 如何使用預加載器和多個圖像顯示加載狀態?
- 23. 如何在使用yii CJuitabs加載內容時顯示預加載器
- 24. 如何創建ajax預加載器
- 25. 如何預加載tinymce編輯器?
- 26. 頁面加載後使用CSS和jQuery加載器的預加載器
- 27. html預加載器
- 28. Flash預加載器
- 29. 預加載IFrame或使用Ajax加載
- 30. 如何製作可以填充矢量圖像背景的預加載器?
預加載意味着微調? – micronyks