Angular2的替代品Angular2-忙碌？

Question

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

它可以很好地显示可观察对象的加载动画。

不幸的是，当我捆绑项目：ng build --prod --aot出错时，它没有设置为使用'--aot‘。

为了UX的目的，我真的更喜欢在用户执行搜索时有一个加载动画，而我还没有找到一个很好的手动完成这一操作的教程/过程。

谢谢。

Answer 1

如果您订阅了可观察对象，则可以手动执行此操作，例如，使用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

Answer 2

现在有了一个增加了AOT支持的pull request。