如何使用带角度的materialize-css

Question

我用angular-cli创建了一个angular4项目.我想实现-css @ next library.所以我用它安装了它

npm install materialize-css@next --save

所以这个安装

"materialize-css": "^1.0.0-alpha.2",

然后在angular-cli.json中我添加了对css和js文件的引用

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

现在这适用于普通组件,如按钮和导航栏,因为这些组件不需要任何js.

如何创建动态元素,如轮播,可折叠和其他需要js的组件？

正如我用Google搜索的那样,有像angualr2-materialize这样的包装库

所以我安装了这个

npm install angular2-materialize --save

并在我的app.module.ts中导入了该模块

import { MaterializeModule } from 'angular2-materialize';

然后在imports数组中@NgModule

imports: [
  BrowserModule,
  MaterializeModule
],

当我使用以下标记时

<a class="waves-effect waves-light btn modal-trigger" (click)="openModal()">Modal</a>

<div id="modal1" class="modal bottom-sheet" materialize="modal" [materializeParams]="[{dismissible: false}]" [materializeActions]="modalActions">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
        <a class="waves-effect waves-green btn-flat" (click)="closeModal()">Close</a>
        <a class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

它正在显示

index.js:4 Uncaught Error: Couldn't find Materialize object on window. It is created by the materialize-css library. Please import materialize-css before importing angular2-materialize.
    at Object.../../../../angular2-materialize/dist/index.js (index.js:4)
    at __webpack_require__ (bootstrap f20633ecefcae2ee4f21:54)
    at Object.../../../../../src/app/app.module.ts (app.component.ts:9)
    at __webpack_require__ (bootstrap f20633ecefcae2ee4f21:54)
    at Object.../../../../../src/main.ts (environment.ts:8)
    at __webpack_require__ (bootstrap f20633ecefcae2ee4f21:54)
    at Object.3 (main.ts:11)
    at __webpack_require__ (bootstrap f20633ecefcae2ee4f21:54)
    at webpackJsonpCallback (bootstrap f20633ecefcae2ee4f21:25)
    at main.bundle.js:1

我错过了什么吗？

有没有办法在不使用包装器的情况下使用MaterialiseCSS库？

Answer 1

angular2-materialize是基于materialize-css 0.X.由于materialize-css 1.X没有依赖jQuery.即使我没有找到任何包装器,我也不想使用包装器模块.所以我通过以下步骤解决了这个问题.

1)angular-cli.json中的 JS和CSS引用

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

hammerjs 某些组件需要监听滑动事件.

2)进口ts

import * as M from "materialize-css/dist/js/materialize";

3)获取元素参考

@ViewChild('collapsible') elCollapsible: ElementRef;

4)包裹元素

ngAfterViewInit() {
    let instanceCollapsible = new M.Collapsible(this.elCollapsible.nativeElement, {});
}

并做了.