带角状突起的同位素v2

Question

我正在使用具有angular cli的同位素布局模块来展示问题

我用以下命令安装了该模块

npm安装同位素-布局--保存

然后我将脚本添加到我的.angular-cli.json文件中

"scripts": [ 
    ...
    "../node_modules/isotope-layout/dist/isotope.pkgd.js"
  ],

以及package.json中的依赖项

 "dependencies": {
    ..
    "zone.js": "^0.8.4",
    "isotope-layout": "^3.0.2"
 }

但是如果我调用我的组件

ngOnInit() { $('.grid').isotope(); }

但是我有一个错误

Property 'isotope' does not exist on type 'jQuery<HTMLElement>'

如何在我的模块中使用这个库？

我尝试用来导入它

import isotope from 'isotope-layout';

但是我有错误“找不到模块”

谁能给我解释一下如何在angular cli中使用angular模块？我很困惑..。

通过控制台输入$('.grid').isotope(); it ps_If ..

Answer 1

install命令和cli配置看起来是正确的。

我认为首先你必须通过添加类型定义来使'Isotope‘可见。

declare var Isotope: any;

您可以在typings.d.ts文件中或直接在component.ts文件中执行此操作。然后你可以像这样在代码中使用它，也就是在点击按钮时。

sortButtonClick(){

  let grid = document.querySelector('.grid');
  let iso = new Isotope(grid, {
      sortBy: 'random'
    }
  );
}