将具有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;