CamanJs angular 6

Question

我正在尝试将 camanjs 与 angular 一起使用 6. 当 npm 上没有类型时如何添加 js 库并将其与 angular 一起使用。我遵循了很多步骤

• 使用 npm 安装 caman

• 将其作为脚本添加到 angular.json 使用其在节点模块中的路径

• 像

一样导入到组件中

import * as Caman from 'path to caman in node module'

• AfterViewInit 中的我喜欢用它

  ngAfterViewInit() {
       Caman('#image-id', function () {
            this.brightness(10);
            this.contrast(20);
          });
     }

但是当启动服务器时我得到这个错误

link 编码：https://stackblitz.com/edit/angular-d5g941

Answer 1

• 先做How can i use foxTooltip with Angular?

• 然后将caman文件夹下nodemodules_中的Caman.pack.js添加到assets中

• 确保您在组件开头声明的 var 与包中的名称相同 "Caman" 区分大小写

Answer 2

在 .angular-cli.json 的 scripts 数组中，将路径添加到 caman

"scripts": [
    "../node_modules/path-to-caman"
],

如果 angular.json 的 scripts 数组中有 Angular 6，请将路径添加到 caman

"scripts": [
    "node_modules/path-to-caman"
],

然后，在您的组件中，只需声明一个名为 Caman 的变量，如下所示：

declare var Caman: any;

你不需要

import * as Caman from 'path-to-caman'

因为您的编译器会抛出一个错误，指出：

Cannot find module 'caman'.

只需将脚本添加到 .angular-cli/angular.json 中的脚本数组（在 Angular 6 的情况下）会将其添加到全局范围，您将能够从您的组件访问它。

此外，请确保在 ngAfterViewInit 生命周期挂钩方法中调用任何函数，因为它会尝试通过 id 访问 DOM 元素。