在TypeScript / Angular 4中导入jQuery插件’jquery.shorten’

我想在使用npm的 Ionic项目中使用名为jquery.shorten的jQuery插件。

installig的命令是npm install jquery.shorten --save 。

我成功地包含了jQuery ，我可以在我的项目中使用它。 但是无法使用jquery.shorten 。

以下是我用来包含jQuery和jquery.shorten的代码。 它位于角度项目的app.module.ts中 –

 import * as $ from 'jquery'; import 'jquery.shorten'; 

我在控制台看到的错误是 –

未捕获错误：找不到模块“jquery.shorten”

我也试过以下。 这次所有控制台错误消失了。 但我找不到使用它的方法。

 import * as shortMe from 'jquery.shorten'; 

它应该用作$(".dynamic-multiple-elements").shorten() 。

我已经遵循了一些指示来包含它。 但似乎没有任何效果。 我可以在node_modules看到文件夹jquery.shorten和必需的js文件。

我将无法使用此解决方案，因为我的元素是动态的，而且很多。

Answer 1

你可以在这里看到如何在Angular中使用JQuery和其他第三方全局变量。

对于没有InjectionToken简单方法，您可以：

npm install jquery --save.

npm install jquery.shorten --save.

在angular-cli.json中添加两个脚本引用

 ... "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/jquery.shorten/src/jquery.shorten.min.js" ], ... 

如果你不使用angular-cli将脚本放在webpack中。

在任何组件中使用：

 declare let $ : any; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { ngOnInit(): void { console.log($); $('#text').shorten(); } } 

组件html进行测试

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 

Answer 2

好的，这是我已经实现的（ 使用这个 ）完美的工作。

1. app.module.ts –这样我的导入就可以在所有组件中使用。

 import 'jquery'; import 'jquery.shorten/src/jquery.shorten'; 

2.我在webpack.config.js添加了以下代码 –

 plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ] 

3.声明变量declare let $: any; 并declare let jQuery: any; 在home.ts ，我想同时使用jQuery和jquery.shorten

问题 –文件webpack.config.js存在于node-modules文件夹下。 在转移代码或重新安装npm期间，它很有可能被替换。

期望 –即使项目文件被转移，变更仍应保留。

如果有可能，我想要与此解决方案类似的解决方案 。