angular4プロジェクトをangular-cliで作成しました。 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
そしてモジュールをmyapp.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ライブラリを使用する方法はありますか?
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>
を忘れないでください
そして完了。
1)マテリアライズをインストールします。
yarn add material-design-icons-iconfont
yarn add materialize-css
yarn add -D @types/materialize-css
2)マテリアライズスタイルのインポート:
@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)マテリアライズをインポートしてドロップダウンをバインドします。
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('');
}
}
angular2-materializeは、おそらくMaterialize
名前空間を使用するMaterialize 0.xを使用します。 materialize-nextはM
名前空間に切り替えられました。
angular2-materializeにはすでにMaterialize(0.x)が含まれているはずです。