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

Question

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

安装命令是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()。

我关注了几个instructions 来包含它。但似乎没有任何效果。 我可以在node_modules 中看到带有所需js 文件的文件夹jquery.shorten。

我将无法使用this solution，因为我的元素是动态的并且很多。

Answer 1

您可以查看here 如何在 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

<p id="text">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</p>

Answer 2

好的，这是我已经实现的 (using this)，它运行良好。

1. app.module.ts - 这样我的导入在所有组件中都可用。

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

2.我将以下代码添加到webpack.config.js -

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

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

问题 - 文件 webpack.config.js 存在于 node-modules 文件夹下。在传输代码或重新安装 npm 时很有可能会被替换。

期望 - 即使项目文件被传输，更改也应该保留。

如果可能的话，我想要类似于this solution 的解决方案。