Javascript 如何使用带角度的物化css

我已经用angularcli创建了一个angular4项目。我想去图书馆。因此，我使用

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';

然后在

导入
@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>

我错过什么了吗

有没有办法不使用包装器就使用MaterializeCSS库？
angular2 materialize可能使用materialize 0.x，后者使用
materialize
命名空间。具体化下一步切换到
M
名称空间

angular2 materialize应该已经包括materialize（0.x）。
angular2 materialize

基于

materialize css 0.x

。由于

物化css1.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） 不要忘记您的

完成了
 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：









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

从'@angular/core'导入{AfterViewInit，Component，ElementRef，OnInit，ViewChild}；
从'@angular/Router'导入{Router}；
从“物化css”导入*为M；
从“rxjs”导入{Observable}；
从“../auth/state”导入{AuthQuery，AuthService}；
@组成部分({
选择器：“应用程序主导航”，
templateUrl:'./main nav.component.html'，
样式URL:['./main nav.component.scss']
})
导出类MainNavComponent实现OnInit，AfterViewInit{
name$：可观察的；
@ViewChild（“下拉菜单”）下拉菜单：ElementRef；
构造函数（专用路由器：路由器，专用authService:authService，专用authQuery:authQuery）{}
恩戈尼尼特（）{
this.name$=this.authQuery.name$；
}
ngAfterViewInit（）{
新的M.Dropdown（this.Dropdown.nativeElement，{}）；
}
注销（）{
this.authService.logout（）；
这个.router.navigateByUrl（“”）；
}
}
然后我需要切换到0.x？如果我想使用1.X呢？有没有办法不用包装库就能使用它？当然，但是，如果包装器库还不支持1.x，那么您就不能使用它们。在这种情况下，我建议询问包装器库的存储库是否支持Materialize 1.x，或者是否存在将旧Materialize版本与新版本混合使用的变通方法。如果我想直接使用它而不使用任何包装器类，我会被绊倒步骤2、3和4请指导我如何实现materialize.css。要在控制台中抑制错误，请添加{read:ElementRef}@ViewChild（'collapsable'，{read:ElementRef}）elcollapsable:ElementRef；对于使用@ViewChildren Step 4 elems[''u results'].forEach（el=>console.log（el.nativeElement））@AbdulRehmanKhan，请确保找到节点模块的位置请添加步骤5）不要忘记在
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('');
  }
}