如何在 Angular 4 中使用 Flip jQuery 插件答案

【问题标题】：How to use Flip jQuery plugin in angular 4如何在 Angular 4 中使用 Flip jQuery 插件
【发布时间】：2017-10-15 12:32:28
【问题描述】：

我有一个使用 jQuery 和 Flip 插件的组件，主要问题是当我尝试在 ngAfterViewInit 中使用它时，它根本不起作用，但也没有从日志中得到任何错误，是否有一个步骤我忘记了，所以我可以使用翻转插件？

这是我目前的代码，希望你们能帮助我，感谢你们的时间

import { Component, OnInit ,AfterViewInit} from '@angular/core';
import {ApiBackEndService} from '../api-back-end.service';
import { DatePipe } from '@angular/common';
import * as moment from 'moment';
declare var $ : any;

declare var flip : any;
@Component({
  selector: 'app-booking',
  templateUrl: './booking.component.html',
  styleUrls: ['./booking.component.css']
})
export class BookingComponent implements OnInit , AfterViewInit{
...
  constructor(private api:ApiBackEndService) { }
  ngAfterViewInit(){

      $(".flip").flip({
        axis: 'y',
        trigger: 'hover'
      });
  }
  ngOnInit() {
    this.api.loadRooms().subscribe(data=>{
      this.rooms=  data.rooms;          
    });    
  }

...

}

jQuery 版本 3.*

【问题讨论】：

标签： javascript jquery angular plugins jquery-plugins

【解决方案1】：

似乎因为我使用 observables 来填充 .flip 类中的数据，所以渲染数据需要几秒钟，而实际上工作，现在我所做的是setTimeOut 1 秒，它工作完美，我正在寻找更好的解决方案，任何更新，我会在这里发布

this.api.loadRooms().subscribe(data=>{
      this.rooms=  data.rooms;
      this.enableAnimations();
    });

enableAnimations(){
    setTimeout(()=>{ $(".flip").flip({
      axis: 'y',
      trigger: 'hover'
    }); }, 1000);

  }

有了这个实现，它工作得很好，我知道这可能是避免超时的更好方法

【讨论】：