it-swarm.com.ru

Как использовать materialize-css с angular

Я создал angular4 проект с angular-cli . Я хочу materialize-css @ next библиотека. Так что я установил его с помощью

npm install [email protected] --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 без использования оболочек?

6
Sunil Garg

angular2-materialize основан на materialize-css 0.X. Поскольку materialize-css 1.X не зависит от jQuery. Даже я не нашел никакой оболочки по этому поводу, и я не хочу использовать модули оболочки. Поэтому я решил эту проблему, выполнив следующие действия.

1) Справочник по JS и CSS в angular-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 требуется для некоторых компонентов для прослушивания скользящих событий.

2) Импорт в тс 

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

3) Получить ссылку на элемент

@ViewChild('collapsible') elCollapsible: ElementRef;

4) Оберните элемент 

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

И сделано. 

8
Sunil Garg

angular2-materialize, вероятно, использует Materialize 0.x, который использует пространство имен Materialize. materialize-next переключается на пространство имен M.

angular2-materialize уже должен включать Materialize (0.x).

0
Daniel Ruf