javascript 如何使用带有 angular 的 materialize-css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48007665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use materialize-css with angular
提问by Sunil Garg
I have created an angular4project with angular-cli. I want to materialize-css@nextlibrary. So I have installed it using
我用angular-cli创建了一个angular4项目。我想实现-css@next库。所以我已经安装了它
npm install materialize-css@next --save
so this installed
所以这个安装
"materialize-css": "^1.0.0-alpha.2",
Then in the angular-cli.json I have added reference to css and js file
然后在 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"
],
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?
如何创建动态元素，如轮播、可折叠和其他需要 js 的组件？
As I have googled there are wrapper libraries like angualr2-materialize
正如我在谷歌上搜索的那样，有像angualr2-materialize这样的包装库
So I have installed this
所以我安装了这个
npm install angular2-materialize --save
And imported the module in my app.module.ts
并在我的app.module.ts 中导入模块
import { MaterializeModule } from 'angular2-materialize';
and then in importsarray of @NgModule
然后在imports数组中@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>
It is showing
它正在显示
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
Am I missing something?
我错过了什么吗？
Is there any way to use MaterializeCSS library without using wrappers?
有没有办法在不使用包装器的情况下使用 MaterializeCSS 库？
回答by Sunil Garg
angular2-materializeis based on materialize-css 0.X. As materialize-css 1.Xhas 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.
angular2-materialize是基于materialize-css 0.X. 由于materialize-css 1.X不依赖于jQuery. 即使我没有找到任何包装器，我也不想使用包装器模块。所以我按照这些步骤解决了这个问题。
1) JS and CSS Reference in angular-cli.json
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"
]
hammerjsis required for some components to listen sliding events.
hammerjs某些组件需要监听滑动事件。
2) Import in ts
2) 在 ts 中导入
import * as M from "materialize-css/dist/js/materialize";
3) Get the element Reference
3) 获取元素引用
@ViewChild('collapsible') elCollapsible: ElementRef;
4) Wrap the element
4) 包裹元素
ngAfterViewInit() {
let instanceCollapsible = new M.Collapsible(this.elCollapsible.nativeElement, {});
}
5) Do not forget #collapsibleon your <ul #collapsible>
5）不要忘记#collapsible你的<ul #collapsible>
And done.
并做了。
回答by Daniel Ruf
angular2-materialize probably uses Materialize 0.x which uses the Materializenamespace. materialize-next switchted to the Mnamespace.
angular2-materialize 可能使用 Materialize 0.x，它使用Materialize命名空间。materialize-next 切换到M命名空间。
angular2-materialize should already include Materialize (0.x).
angular2-materialize 应该已经包含 Materialize (0.x)。
回答by mico.barac
1) Install Materialize:
1) 安装 Materialise：
yarn add material-design-icons-iconfont
yarn add materialize-css
yarn add -D @types/materialize-css
2) Import Materialize styles:
2) 导入 Materialise 样式：
@import '~material-design-icons-iconfont/dist/material-design-icons.css';
@import '~materialize-css/sass/materialize';
3) Create HTML for the component:
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) Import Materialize and bind the dropdown:
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('');
}
}
