angular - 如何为 Angular2 安装组件包装器(特别是 Dragula)

Question

我对 npm 和 Angular2 都很陌生。我已经按照 Angular2 的教程创建了一个初始应用程序，并且我已经有了相当实质性的东西。 https://angular.io/docs/ts/latest/tutorial/

我需要为我的应用程序添加拖放功能，我相信我应该使用 Angular 原生的东西而不是 jquery-ui。我找到了这个插件:

https://github.com/valor-software/ng2-dragula

我已经按照 README 中的说明进行操作，看起来它已经安装好了。它存在于 node_modules 和 ng2-dragula": "^1.0.3 已添加到我的依赖项中。然后我运行 npm install 并启动。

仍然，当我尝试使用自述文件中指定的指令和提供程序时，它返回未找到(在我的 IDE 和控制台中)。

@Component({
  selector: 'sprint-tasks',
  inputs: ['sprintTask'],
  templateUrl: './views/sprint-tasks.html',
  directives: [Dragula],
  providers: [SprintTaskService],
  viewProviders: [DragulaService]
})

现在，我猜测我需要 (1) 在文件顶部导入组件和/或 (2) 在索引的加载库部分列出库。但是文档没有提到这一点，我一直无法找出正确的端点。几乎就好像文档认为这些指令现在应该是 npm 安装后系统的“固有”，但我不知道这是否是一件事:)

我猜想/希望这对于习惯于处理导入第三方组件的人来说是相当明显的。感谢您提供的任何帮助。

Answer 1

这个问题的罪魁祸首通常是 tsconfig.json 文件上的标志。为了正确引用这些文件，您应该使用

"moduleResolution": "node"

您还需要使用模块加载器库(如 Systemjs 或类似的东西)导入它们。

Dragula 库应该带有一个包，然后您可以将其导入模块加载器。使用系统，这应该很简单，只需将 bundle 包含在您的 index.html 文件中即可。

<script src="node_modules/dragula/path/to/bundle.js"></script>

或者不管这个文件叫什么。

如果库不包含一个包，或者这个包不适合你，那么你可以在你的系统配置中注释它，系统会为你做。

System.config({
  map:{
    'dragula': 'node_modules/dragula'
  }
});

与往常一样，这可能需要根据您的具体需求进行一些调整，但应该会让您接近。需要更多信息才能针对您的特定场景进一步微调答案。