Question

需要将新的matrialized css 1.0 alpha版本导入到角度4.我可以在下面编写代码以使其工作

<a onclick="M.toast({html: 'I am a toast'})" class="btn">Toast!</a>

但我想将物化模块导入typescript

从'materilized-css'导入{M};

这样我就可以在某些功能中使用

了

function test() {
  // some condition 
  M.toast({html: 'I am a toast'})
}

我在.angular-cli.json中添加了脚本文件路径。

"styles": [
    "styles.css",
    "../node_modules/materialize-css/dist/css/materialize.min.css"
  ],
  "scripts": [
    "../node_modules/materialize-css/dist/js/materialize.min.js"
  ]

我该怎么办？需要帮助，或者有任何其他方法可以使这项工作。

Answer 1

这不是它的工作原理。

首先，您需要在angular-cli.json文件中的index.html文件中添加JS导入（并将您的库声明为资源）。

你应该做后者。您必须将脚本放入angular-cli文件的scripts属性中。

一旦完成，在组件中，您需要声明一个全局变量

declare var M: any;

现在在您的组件中，您将可以访问此变量，就像在JS中一样。

如果您有任何疑问，请随时提问！

编辑详情

<强>角cli.json

"styles": [
  "You should have some styles in this property",
  "Add your dependency like so"
  "../node_modules/PATH/TO/MATERIALIZE.css"
],
"scripts": [
  "You should have some scripts in this property",
  "Add your dependency like so"
  "../node_modules/PATH/TO/MATERIALIZE.js"
],

在您的组件中

// First, you have your import zone
import { ... } from '...';

// You put your declare here
declare var M: any;

// Then you have the component
@Component({...})
export class MyComponent implements onInit { ... }

如何将新的matrialized css 1.0 alpha版本导入角4

1 个答案: