如何使用帶有角度的 materialize-css

Question

我用angular-cli創建了一個angular4項目。 我想實現-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';

然后在@NgModule imports數組中

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 庫？

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, {});
}

5）不要忘記#collapsible您<ul #collapsible>

完成了。

Answer 2

1) 安裝 Materialise：

yarn add material-design-icons-iconfont
yarn add materialize-css
yarn add -D @types/materialize-css

2) 導入 Materialise 樣式：

@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('');
  }
}

Answer 3

angular2-materialize 可能使用 Materialize 0.x，它使用Materialize命名空間。 materialize-next 切換到M命名空間。

angular2-materialize 應該已經包含 Materialize (0.x)。