Angular2/Ionic2 + ng2-dragula 有人让它工作吗？答案

【问题标题】：Angular2/Ionic2 + ng2-dragula Did anyone get it to work?Angular2/Ionic2 + ng2-dragula 有人让它工作吗？
【发布时间】：2016-07-28 12:29:45
【问题描述】：

我正在尝试将拖放功能添加到我的 ionic 2 应用程序中。但无法让它工作。

这是我到目前为止所做的：

npm install ng2-dragula dragula --save

然后在我的页面中：

@Component({
  templateUrl: 'build/pages/dragtest/dragtest.html',
  directives: [Dragula],
  viewProviders: [DragulaService],
})
export class DragtestPage {
  constructor(private nav: NavController) {
  }
}

但是当我添加 [dragula] 标签时，我得到了错误：无法绑定“dragula”，因为它不是已知的原生属性。

有没有人让这个与 ionic 2 一起工作，有什么例子吗？

【问题讨论】：

您找到解决方案了吗？我也面临同样的问题...

标签： angular ionic2 dragula ng2-dragula

【解决方案1】：

我想你错过了 import 声明：

从 'ng2-dragula/ng2-dragula' 导入 {DragulaService, Dragula};

我已经尝试过了，但似乎 IDE 找不到目录“ng2-dragula”（PHP Storm 中的红色文本）

【讨论】：

【解决方案2】：

我做到了 ;) 安装后在 app.module.ts 中导入模块和服务：

import { DragulaModule, DragulaService } from 'ng2-dragula/ng2-dragula';

然后将模块添加到导入中：

imports: [
IonicModule.forRoot(MyApp),
DragulaModule
],

以及对供应商的服务：

providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, DragulaService]

之后，您只需将服务导入您将使用的组件中：

import { DragulaService } from 'ng2-dragula/ng2-dragula';

并将其传递给构造函数：

constructor(private dragulaService: DragulaService ) {}

最后按照here.所示的步骤进行操作（仅适用于模板，不适用于导入）

【讨论】：

【解决方案3】：

我只是写了一篇关于如何使最新版本的 ng-dragula 为 ionic 2 工作的教程，在 ng-dragula github 页面上，他们有代码示例，但如果你只是复制和粘贴不起作用，我们需要进行一些小改动以使其正常工作。

几周前写一篇关于它的文章，希望这会有所帮助

http://etenbo.com/add-drag-and-drop-on-ionic-2-by-plugin-dragula/

【讨论】：