如何为Angular2安装组件包装器(特别是Dragula) [英] How to install a component wrapper for Angular2 (Dragula in particular)

问题描述

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

我需要在我的应用程序中添加拖放功能，并相信我应该使用Angular本身而不是jquery-ui.我找到了这个插件:

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

我已按照自述文件中的说明进行操作，并且似乎已安装.它位于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安装之后是系统的先天"，但是我不知道这是不是一件事情:)

我猜/希望对于习惯于导入第三方组件的任何人来说这都是显而易见的.感谢您提供的任何帮助.

解决方案

此问题的常见原因是tsconfig.json文件上的标志.为了正确引用这些文件，您应该使用

"moduleResolution": "node"

您还需要使用诸如Systemjs之类的模块加载程序库或类似的库来导入这些文件.

Dragula库应该附带一个捆绑软件，您可以将其导入模块加载器中.对于系统，这应该像在index.html文件中简单包含分发包一样简单.

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

或任何称为文件的文件.

如果库不包含捆绑软件，或者捆绑软件对您不起作用，则可以在系统配置中对此进行批注，然后系统将为您完成该工作.

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

与往常一样，这可能需要针对您的确切需求进行一些调整，但应该使您与您保持联系.需要更多信息来进一步调整针对您特定情况的答案.

I'm fairly new with both npm and Angular2. I've followed Angular2's tutorials on creating an initial app and I already have something fairly substantial. https://angular.io/docs/ts/latest/tutorial/

I need to add drag/drop ability to my app and believe I should probably use something native to Angular rather than jquery-ui. I've found this plugin:

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

I've followed the instructions in the README, and it appears it's been installed. It's present under node_modules and ng2-dragula": "^1.0.3 has been added to my dependencies. I then ran npm install and start.

Still, when I attempt to use the directive and provider as specified in the readme, it returns not found (both in my IDE and the console).

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

Now, I'm guessing that I either need to (1) import the component at the top of the file and/or (2) list the library in my index's load libraries section. But the documentation doesn't mention this, and I've been unable to figure out the correct endpoints. It's almost as if the documentation believes these directives should now be "innate" to the system after the npm install, but I don't know if that's a thing :)

I'm guessing/hoping this will be fairly obvious to anyone who is used to dealing with importing third-party components. Thanks for any help you can provide.

解决方案

The usual culprit of this issue is a flag on the tsconfig.json file. In order to reference those files correctly, you should use

"moduleResolution": "node"

also you will need to import these with a module loader library like Systemjs, or something similar.

The Dragula library should come with a bundle that you can then import into the module loader. With system this should be as easy as simply including the bundle in your index.html file.

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

or whatever the file is called.

If the library does not include a bundle, or the bundle does not work for you, then you can annotate this in your system config and system will do that for you.

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

As always this may need a little tweaking for your exact needs, but should get you close. More information would be needed to further fine-tune an answer to your specific scenario.

这篇关于如何为Angular2安装组件包装器(特别是Dragula)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！