如何使用带角度的materialize-css [英] How to use materialize-css with angular
问题描述
我使用 angular-cli 创建了一个 angular4 项目。我想 materialize-css @ next 库。所以我使用
I have created an angular4 project with angular-cli. I want to materialize-css@next library. So I have installed it using
npm install materialize-css@next --save
所以这已安装
"materialize-css": "^1.0.0-alpha.2",
然后在angular-cli.json中我添加了对css和js文件的引用
Then in the angular-cli.json I have added reference to css and js file
"styles": [
"styles.css",
"../node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
"../node_modules/materialize-css/dist/js/materialize.js"
],
现在这适用于普通组件像按钮和导航栏一样,因为这些组件不需要任何js。
Now this is working fine for normal components like button and navigation bar as these components do not need any js.
如何创建动态元素,如轮播,可折叠和其他需要js的组件?
How can I create dynamic elements like the carousel, collapsible and other components in which there is the requirement for js?
正如我用Google搜索的那样有包装库,例如 angualr2-materialize
As I have googled there are wrapper libraries like angualr2-materialize
所以我安装了这个
npm install angular2-materialize --save
将模块导入我的 app.module.ts
import { MaterializeModule } from 'angular2-materialize';
然后在进口
数组 @NgModule
imports: [
BrowserModule,
MaterializeModule
],
当我使用以下标记时
and when I use the following markup
<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库而不使用包装器?
Is there any way to use MaterializeCSS library without using wrappers?
推荐答案
angular2-materialize
基于在 materialize-css 0.X
。由于 materialize-css 1.X
不依赖于 jQuery
。即使我没有找到任何包装器,我也不想使用包装器模块。所以我按照以下步骤解决了这个问题。
angular2-materialize
is based on materialize-css 0.X
. As materialize-css 1.X
has not dependency on jQuery
. Even I did not found any wrapper over this and I don't want to use the wrapper modules. So I have solved this problem by following these steps.
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, {});
}
完成。
这篇关于如何使用带角度的materialize-css的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!