Question

我希望在客户端收到HTTP响应后运行jQuery动画。

我的网络服务，它是一个使用AngularJS的Http功能的简单网络服务：

import {Component, View, Injectable} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {JsonObj} from './JsonObj.class';
@Injectable()
export class WebService {
    private http: Http;

constructor(http: Http) {
    this.http = http;
}

get(url: string) {
    return this.http.get(url)
        // Call map on the response observable to get the parsed people object
        .map(res => {
            let _d = res.json();
            return new JsonObj(_d.code, _d.status, _d.data, _d.error);
        });
    }
}

JsonObj，这只是一个托管来自Web服务的数据的对象：

export class JsonObj {
private code: Number;
private status: String;
private data: any;
private error: Array<any>;

constructor(_c: Number, _s: String, _d: Array<any>, _e: Array<any>) {
    this.code = _c;
    this.status = _s;
    this.data = _d;
    this.error = _e;
}

getCode() {
    return this.code;
}
getStatus() {
    return this.status;
}
getData() {
    return this.data;
}
getError() {
    return this.error;
}
}

发出网络服务电话的组件：

import {Component, ElementRef} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {Rotate} from './Rotate.class';
import {WebService} from '../../App/js/WebService.class';

@Component({
selector: 'Reviews',
viewProviders: [HTTP_PROVIDERS],
templateUrl: 'assets/templates/reviews.template.html'
})
export class Reviews {
public review: Array<any>;
private speed = 5000;
private outElem = null;
private parentElem = null;
private interval = null;

constructor(ws: WebService, el: ElementRef) {
    console.log('Reviews');

    ws.get('assets/temp_quotes.json').subscribe(
        data => this.review = data.getData().reviews,
        err => console.log('Error getting Review feed', err.getCode(), err.getError()),
        () => {
            console.log('Successful retrieval of the Review feed', this.review);
            let rotator = new Rotate(el);
            rotator.loop();
        }
    );
}
}

模板，ngFor循环来自Web服务的数据并输出它：

<div class="feedback-wrapper">
    <div class="quote_overlay hide" style="display: none;"></div>
    <h4>What people have to say about us...</h4>
    <ul>
        <li *ngFor="#el of review" class="hide" style="display: none;">
            <p class="quote">{{el.quote}}</p>
            <p class="author">{{el.name}}, United Kingdom<br>Reviews.co.uk, {{el.date}}</p>
        </li>
    </ul>
    <p class="show-right"><a href="/testimonials.htm">Read all Reviews</a></p>
</div>

我的问题是当Component调用它时：

let rotator = new Rotate(el);
rotator.loop();

即使已使用响应更新了dom，也未填充来自Web服务的el（ElementRef）内容。看来rotator.loop（）已经过早调用了。我想做一个动画，一次一个地循环每个列表项。关于如何正确完成的任何想法？

Answer 1

无论上一次发生什么都会启动动画

constructor(ws: WebService, el: ElementRef) {
  console.log('Reviews');
  private _initialized: boolean false;

  ws.get('assets/temp_quotes.json').subscribe(
    data => this.review = data.getData().reviews,
    err => console.log('Error getting Review feed', err.getCode(), err.getError()),
    () => {
        console.log('Successful retrieval of the Review feed', this.review);
        if(!this._initialized) {
          this._initialized = true; 
        } else {
          this.startAnimation();
        }
    });
  }

  ngAfterViewInit() {
    if(!this._initialized) {
      this._initialized = true;
    } else {
      this.startAnimation();
    }
  }
  startAnimation() {
    let rotator = new Rotate(el);
    rotator.loop();
  }
}

您还可以创建一个observable，并在getData()完成时添加一个事件，在ngAfterViewInit()中添加另一个事件。订阅observable，忽略第一个事件并在第二个事件上执行startAnimation()，然后取消订阅。我自己不使用TS，因此我很难提供代码示例。

Angular 2 HTTP响应动画

1 个答案: