Question

我正在试图弄清楚如何在Ionic 3项目中使用ShuffleJs。我已经使用npm命令按照@ https://www.npmjs.com/package/shufflejs

的指示安装它

然后我使用ES6方法来启动服务/插件。但是，它返回错误：

Error: Uncaught (in promise): TypeError: Shuffle needs to be initialized with an element.

我认为这种方法告诉我的是我没有在HTML中正确初始化它。我已经按照ShuffleJs的指南和示例代码进行操作了，我被卡住了。我是TypeScript的新手，并试图用JavaScript重新连接我的大脑。

页面的

打字稿：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import Shuffle from 'shufflejs';

@Component({
  selector: 'page-locator',
  templateUrl: 'locator.html'
})
export class LocatorPage {

  const shuffleInstance = new Shuffle(document.getElementById('grid'), {
  itemSelector: '.js-item',
  sizer: '.js-shuffle-sizer'
});

  constructor(public navCtrl: NavController) {

  }

}

页面的HTML：

<ion-header>
  <ion-navbar>
    <ion-title>
      Freshwater Macro invertebrates
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div id="grid">
    <div class="js-item column">
      <div class="aspect aspect--16x9">
        <div class="aspect__inner"><img src="https://images.unsplash.com/uploads/141310026617203b5980d/c86b8baa?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=600&amp;h=338&amp;fit=crop&amp;s=882e851a008e83b7a80d05bdc96aa817" obj.alt="obj.alt"/></div>
      </div>
    </div>
    <div class="js-item column">
      <div class="aspect aspect--16x9">
        <div class="aspect__inner"><img src="https://images.unsplash.com/uploads/141310026617203b5980d/c86b8baa?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=600&amp;h=338&amp;fit=crop&amp;s=882e851a008e83b7a80d05bdc96aa817" obj.alt="obj.alt"/></div>
      </div>
    </div>
    <div class="js-item column">
      <div class="aspect aspect--16x9">
        <div class="aspect__inner"><img src="https://images.unsplash.com/uploads/141310026617203b5980d/c86b8baa?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=600&amp;h=338&amp;fit=crop&amp;s=882e851a008e83b7a80d05bdc96aa817" obj.alt="obj.alt"/></div>
      </div>
    </div>
    <div class="js-item column">
      <div class="aspect aspect--16x9">
        <div class="aspect__inner"><img src="https://images.unsplash.com/uploads/141310026617203b5980d/c86b8baa?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=600&amp;h=338&amp;fit=crop&amp;s=882e851a008e83b7a80d05bdc96aa817" obj.alt="obj.alt"/></div>
      </div>
    </div>
    <div class="js-item column">
      <div class="aspect aspect--16x9">
        <div class="aspect__inner"><img src="https://images.unsplash.com/uploads/141310026617203b5980d/c86b8baa?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=600&amp;h=338&amp;fit=crop&amp;s=882e851a008e83b7a80d05bdc96aa817" obj.alt="obj.alt"/></div>
      </div>
    </div>
    <div class="js-item column">
      <div class="aspect aspect--16x9">
        <div class="aspect__inner"><img src="https://images.unsplash.com/uploads/141310026617203b5980d/c86b8baa?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=600&amp;h=338&amp;fit=crop&amp;s=882e851a008e83b7a80d05bdc96aa817" obj.alt="obj.alt"/></div>
      </div>
    </div>
    <div class="js-item column">
      <div class="aspect aspect--16x9">
        <div class="aspect__inner"><img src="https://images.unsplash.com/uploads/141310026617203b5980d/c86b8baa?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=600&amp;h=338&amp;fit=crop&amp;s=882e851a008e83b7a80d05bdc96aa817" obj.alt="obj.alt"/></div>
      </div>
    </div>
    <div class="js-item column">
      <div class="aspect aspect--16x9">
        <div class="aspect__inner"><img src="https://images.unsplash.com/uploads/141310026617203b5980d/c86b8baa?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=600&amp;h=338&amp;fit=crop&amp;s=882e851a008e83b7a80d05bdc96aa817" obj.alt="obj.alt"/></div>
      </div>
    </div>
    <div class="js-item column">
      <div class="aspect aspect--16x9">
        <div class="aspect__inner"><img src="https://images.unsplash.com/uploads/141310026617203b5980d/c86b8baa?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=600&amp;h=338&amp;fit=crop&amp;s=882e851a008e83b7a80d05bdc96aa817" obj.alt="obj.alt"/></div>
      </div>
    </div>
    <div class="column my-sizer-element"></div>
  </div>
</ion-content>

Answer 1

我相信document.getElementById('grid')找不到任何元素，因为它在您尝试获取时未加载。

您可以使用Ionic内置生命周期事件，例如ionViewDidLoad()。

const shuffleInstance;

ionViewDidLoad() {
    shuffleinstance = new Shuffle(document.getElementById('grid'), {
        itemSelector: '.js-item',
        sizer: '.js-shuffle-sizer'
    });
}

注意：我建议将逻辑远离constructor()或远离任何函数，因为在生命周期挂钩/事件中，您可以更轻松地控制执行。

以下是Ionic生命周期事件的官方文档：https://ionicframework.com/docs/api/navigation/NavController/#lifecycle-events

你也可以在Ionic中使用Angular生命周期事件，因为它是Ionic的一部分：https://angular.io/guide/lifecycle-hooks

在离子项目中使用ShuffleJs

1 个答案: