Question

我有一个使用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。*

Answer 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);

  }

有了这个实现，它运行正常，我知道它可能是一种避免超时的更好方法

如何在角度4中使用Flip jQuery插件

1 个答案: