如何使用带角度的materialize-css
Posted
技术标签:
【中文标题】如何使用带角度的materialize-css【英文标题】:How to use materialize-css with angular 【发布时间】:2018-06-09 00:18:19 【问题描述】:我用 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的动态元素?
正如我用谷歌搜索的那样,有像 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
我错过了什么吗?
有什么方法可以在不使用包装器的情况下使用 MaterializeCSS 库?
【问题讨论】:
【参考方案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, );
5) 不要忘记#collapsible
上的<ul #collapsible>
完成了。
【讨论】:
我被困在第2、3和4步请指导我如何实现materialize.css。 要抑制控制台中的错误,请添加 read: ElementRef @ViewChild('collapsible', read: ElementRef ) elCollapsible: ElementRef; 对于使用@ViewChilderen Step 4 elems['_results'].forEach(el => console.log(el.nativeElement)) @AbdulRehmanKhan 确保找到你的 node_modules 的位置 请添加第 5 步)不要忘记您的 上的#collapsible【参考方案2】:1) 安装 Materialise:
yarn add material-design-icons-iconfont
yarn add materialize-css
yarn add -D @types/materialize-css
2) 导入 Materialize 样式:
@import '~material-design-icons-iconfont/dist/material-design-icons.css';
@import '~materialize-css/sass/materialize';
3) 为组件创建 html:
<div class="container">
<ul id="dropdown" class="dropdown-content">
<li><a href="#!" (click)="logout()">Logout</a></li>
</ul>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Akita</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a routerLink="dashboard" *showIfLoggedIn="true">Dashboard</a></li>
<li><a routerLink="todos" *showIfLoggedIn="true">Todos</a></li>
<li *showIfLogin="false"><a *showIfLoggedIn="false" routerLink="login"
class="waves-effect waves-light btn">Login</a></li>
<li><a class="dropdown-trigger" href="#!" data-target="dropdown" #dropdown>Welcome, name$ | async!<i
class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
</div>
4) 导入Materialize并绑定下拉菜单:
import AfterViewInit, Component, ElementRef, OnInit, ViewChild from '@angular/core';
import Router from '@angular/router';
import * as M from 'materialize-css';
import Observable from 'rxjs';
import AuthQuery, AuthService from '../auth/state';
@Component(
selector: 'app-main-nav',
templateUrl: './main-nav.component.html',
styleUrls: ['./main-nav.component.scss']
)
export class MainNavComponent implements OnInit, AfterViewInit
name$: Observable<string>;
@ViewChild('dropdown') dropdown: ElementRef;
constructor(private router: Router, private authService: AuthService, private authQuery: AuthQuery)
ngOnInit()
this.name$ = this.authQuery.name$;
ngAfterViewInit()
new M.Dropdown(this.dropdown.nativeElement, );
logout()
this.authService.logout();
this.router.navigateByUrl('');
【讨论】:
【参考方案3】:angular2-materialize 可能使用 Materialize 0.x,它使用 Materialize
命名空间。 materialize-next 切换到 M
命名空间。
angular2-materialize 应该已经包含 Materialize (0.x)。
【讨论】:
那我需要切换到 0.x 吗?如果我想使用 1.X 怎么办? 有什么方法可以在没有包装库的情况下使用它? 当然,但是如果包装库还不支持 1.x,您就不能使用它们。 在这种情况下,我建议在包装库的存储库中询问是否支持 Materialize 1.x,或者是否有将旧 Materialize 版本与新版本混合的解决方法。 如果我想直接使用它而不使用任何包装类?以上是关于如何使用带角度的materialize-css的主要内容,如果未能解决你的问题,请参考以下文章
Vue.js,如何导入和使用JQuery初始化materialize-css轮播
如何在 React 中正确捕获 Materialize-CSS datepicker 值?
使用 angular-cli、sass 和 materialize-css 找不到字体