Angular 2 HTTP响应动画

我想在客户端收到HTTP响应后运行jQuery动画。Angular 2 HTTP响应动画

我的Web服务，它是一个使用AngularJS的HTTP功能的简单的Web服务：

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; 
} 
}

使Web服务电话的组件：

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 l哎呀通过从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>

我的问题是，当组件调用此：

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

从Web服务的EL（ElementRef）内容没有被填充即使dom已经更新了回应。看起来rotator.loop（）已经被调用得太快了。我想做一个循环显示每个列表项的动画。任何想法如何可以正确完成？

来源

2016-02-09 Chris Sheppard

无论是最后启动动画

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(); 
    } 
}

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

来源

2016-02-09 08:40:35

Angular 2 HTTP响应动画

回答

相关问题