Question

在我的Angular 6应用中，当我的组件启动时，它首先从flickr获取提要。

完成此操作后，在finalize( )部分中，我将使它运行动画功能runAnim()，但不会触发动画。它回显该函数正在使用console.log运行，但是什么也没有发生。使用greensock tweenmax进行动画制作。

我可以创建一个超时功能，该功能可以使它正常工作，但是我认为应该有另一种方法。

当我单击调用相同功能的按钮时，动画将运行，因此我知道它可以工作。

这曾经在Angular 2中起作用，我是否缺少某些东西？

可以在github或以下找到源代码。

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../data.service';
import { HttpClient } from '@angular/common/http';
import 'gsap';
import { finalize } from 'rxjs/operators';

@Component({
  selector: 'app-feed',
  templateUrl: './feed.component.html',
  styleUrls: ['./feed.component.css']
})
export class FeedComponent implements OnInit {
  flickrFeed: any;
  instance: any;
  updateMasonryLayout: boolean;
  tl: any;

  constructor(private data: DataService, private http: HttpClient) { }

  ngOnInit() {
    this.tl = new TimelineMax({ delay: 0  });
    this.getFeed();
  }

  getFeed() {
    this.data.getFlickrFeed().pipe(finalize( () => {
      this.runAnim();
    })).subscribe(data => {
      this.flickrFeed = data['items'];
    },
    error => console.log('Error: ', error)
  );

  }

  runAnim() {
    console.log('Running animation');
    TweenMax.to('.animg', .5, { y: 225, css: { autoAlpha: 1 }, ease: Power1.easeOut });
  }

  idof(link) {
    const res = link.substr(-12, 11);
    return res;
  }
}

如何在收到角度为6的响应后正确运行函数

0 个答案: