我用angular-cli创建了一个angular4项目.我想要
materialize-css@next库.所以我用它安装了它
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';
然后在@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库？
解决方法
angular2-materialize基于materialize-css 0.X.作为materialize-css 1.X不依赖于jQuery.即使我没有找到任何包装器,我也不想使用包装器模块.所以我通过以下步骤解决了这个问题.
1)angular-cli.json中的JS和CSS引用
"styles": [ "styles.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,{});
}
并做了.
