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