Question

我构建了我的应用程序以处理angular2-busy： https://www.npmjs.com/package/angular2-busy

它非常适合显示可观察量的加载动画。

不幸的是，它没有设置与＆＃39; - aot＆＃39;当我捆绑项目时：ng build --prod --aot因为它错误。

出于用户体验的目的，当用户执行搜索时，我真的更喜欢加载动画，而我却无法手动找到一个好的教程/流程。

感谢。

Answer 1

如果订阅Observables，可以手动执行此操作，例如使用jsrx，您可以设置如下内容：

Angular2组件：

    @Component({
      moduleId: module.id,
      selector: 'sd-offer',
      templateUrl: 'offer.component.html',
      styleUrls: ['offer.component.css']
    })
    export class OfferComponent {
      public offers$: Observable<Offer>;
      private busy:boolean;

      constructor(private store: Store<IAppState>, public routerext: RouterExtensions) {
        this.busy = true;
        // returns observable
        this.offers$ = store.let(getOffers);    

        this.offers$.subscribe(
          (x) => { // next
            console.log('Next ' + x);
            this.busy = false;
          },
          (err) => { // error
          console.log('Error: ' + err);
            this.busy = false;        
          },
          () => { // completed
            console.log('Completed');
            this.busy = false;
          }      
        );        
      }
  // ...
}

组件的HTML模板：

<span *ngIf="busy">
  <h3>Loading...</h3>
</span>

<div *ngIf="!busy">
  <a *ngFor="let offer of (offers$ | async)" href="{{offer.link}}">
      <img src="{{offer.img}}" alt="{{offer.name}}">
  </a>
</div>

这将显示

加载...

在后台获取数据时。

或者您可以使用微调器img

替换loading ...字符串

Answer 2

现在有pull request添加AOT支持。

Angular 2替代Angular2-busy？

2 个答案:

加载...