在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文件。
我将无法使用此解决方案，因为我的元素是动态的，而且很多。
你可以在这里看到如何在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
好的，这是我已经实现的（ 使用这个 ）完美的工作。
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期间，它很有可能被替换。
期望 –即使项目文件被转移，变更仍应保留。
如果有可能，我想要与此解决方案类似的解决方案 。