マテリアルサイズ-ssssの使用方法

Question

angular4プロジェクトangular-cliで作成しました。私はmaterialize-css@nextライブラリにしたいです。だから私は、そう、これは今、これは私がCSSを参照するとJSファイル

"styles": [ 
    "styles.css", 
    "../node_modules/materialize-css/dist/css/materialize.css" 
], 
"scripts": [ 
    "../node_modules/materialize-css/dist/js/materialize.js" 
], 

を追加したアンギュラcli.jsonに続いて

​​

をインストール

npm install materialize-css@next --save 

を使用して、それをインストールしていますこれらのコンポーネントはjsを必要としないので、ボタンやナビゲーションバーのような通常のコンポーネントでうまく動作します。

jaの要件があるカルーセル、折り畳み式などの動的要素を作成するにはどうすればよいですか？

私はangualr2、マテリアライズ

のようなラッパー・ライブラリーがあるググているように、私はこの

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ライブラリを使用する方法はありますか？

Answer 1

angular2-materializeは、materialize-css 0.Xに基づいています。 materialize-css 1.XはjQueryに依存しません。これ以上のラッパーは見つかりませんでしたが、ラッパーモジュールを使用したくありません。だから、私はこれらのステップに従うことでこの問題を解決しました。 角度-cli.json

"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で

1）JSとCSSリファレンスイベント摺動リッスンするいくつかのコンポーネントのために必要とされます。

TS

import * as M from "materialize-css/dist/js/materialize"; 

3で

2）輸入）要素が

@ViewChild('collapsible') elCollapsible: ElementRef; 

4を参照ゲット）要素

ngAfterViewInit() { 
    let instanceCollapsible = new M.Collapsible(this.elCollapsible.nativeElement, {}); 
} 

およびDONEを包みます。

Answer 2

おそらくangular2-materializeは、Materialize名前空間を使用するMaterialize 0.xを使用します。 materialize-nextはM名前空間に切り替えました。

angular2-materializeには、すでにMaterialize（0.x）が含まれている必要があります。