angular - next.materialize 初始化没有 jQuery

Question

今天我访问了 materializecss 的 1.0 alpha 版本，我正在使用 Angular 和我使用一些需要 jQuery 初始化的组件，比如 Side Nav

文档说可以用以下方法初始化它们:

  var elem = document.querySelector('.sidenav');
  var instance = new M.Sidenav(elem, options);

而不是我现在使用的 jQuery 方式:

  $(document).ready(function(){
    $('.sidenav').sidenav();
  });

我怎样才能让它成为可能？什么是 M？也许我需要这种新方法的示例...

Answer 1

首先，您需要在 index.html 文件顶部或 angular-cli.json 文件中添加 CSS 和 JS 导入

然后你需要声明一个全局变量

declare var M: any;

然后你就可以使用它了......

更详细:

angular-cli.json

"styles": [
  "../node_modules/PATH/TO/MATERIALIZE.css"
],
"scripts": [
  "../node_modules/PATH/TO/MATERIALIZE.js"
],

组件内部

// Imports
import { ... } from '...';

// Here you declare the M
declare var M: any;

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