将具有 jquery 依赖项的 javascript 库添加到 angular 9

Question

我想在我的 angular 应用程序中使用watermark.js在上传图像之前为图像添加水印。

根据我的记忆，我所做的应该足以使这项工作：

下载

npm i --save watermark.js

添加到angular.json scripts标签

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

在组件中使用它

declare var watermark: any;
...
watermark(args)

但我明白了

ERROR ReferenceError: watermark is not defined

我还尝试通过创建src/@types/watermark/index.d.ts并将src/@types包含在tsconfig->typeRoots来将其声明为模块。

declare module 'watermark'

然后导入

import * as w from 'watermark';

但是这样构建失败，因为它找不到模块“水印”。

对 jquery 做同样的事情

import * as $ from 'jquery';
...    
$(window).ready(console.log('test'))

有任何想法吗？

Answer 1

根据水印页面： https : //lelinhtinh.github.io/watermark/

$(function() {
  $('.img_awesome').watermark();
});

因此，在您的组件中使用 jQuery 获取 dom 元素的句柄，然后：

$(<selector>).watermark();

为此，您需要： declare var $:any;