如何使用 angular 2 的物化？

Question

我已经被这个问题困扰了 2 天，对 angular 2 来说还很陌生，所以我正在尝试将物化与 angular 一起使用 2 我解决了几个错误，它要求更新到我更新的打字稿版本现在有更多问题。只是想了解将物化与 angular2 一起使用的最佳方法是什么？

package.json

{
  "name": "SLA",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "build": "ng build && node server.js",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.2",
    "@angular/cdk": "^5.0.0-rc0",
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/material": "^5.0.0-rc0",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "angular2-materialize": "^15.1.10",
    "axios": "^0.17.0",
    "body-parser": "^1.18.2",
    "core-js": "^2.4.1",
    "express": "^4.16.2",
    "hammerjs": "^2.0.8",
    "jquery": "^2.2.4",
    "materialize-css": "^0.100.2",
    "oploggery": "^0.1.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.28.3",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.6.1"
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { StreamComponent } from './stream/stream.component';
import { StreamService } from './stream.service';
import { routing } from './app.routes';
import { MaterializeModule } from "angular2-materialize";
import { SearchComponent } from './search/search.component';
import { DetailComponent } from './detail/detail.component';
import { SlaChartComponent } from './sla-chart/sla-chart.component';
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
const ROUTES = [
  {
    path: '',
    redirectTo: 'app',
    pathMatch: 'full'
  },
  {
    path: 'stream',
    component: StreamComponent
  }
];

@NgModule({
  declarations: [
    AppComponent,
    StreamComponent,
    SearchComponent,
    DetailComponent,
    SlaChartComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterializeModule,
    MatButtonModule,
    MatCheckboxModule,
    routing

  ],
  providers: [StreamService],
  bootstrap: [AppComponent]
})
export class AppModule { }

错误

Metadata version mismatch for module WebstormProjects/slariskanalysisgui/node_modules/@angular/material/core/typings/index.d.ts, found version 4, expected 3, resolving symbol AppModule in WebstormProjects/slariskan
    alysisgui/src/app/app.module.ts, resolving symbol AppModule in C:/Users/sh529u/WebstormProjects/slariskanalysisgui/src/app/app.module.ts

Answer 1

由于您没有提供很多代码文件，因此很难回答您的具体情况。关于 how to use materialize with angular 2? 这个问题，这是让两者一起工作的可证明的方法。

使用 cli 创建一个新项目 ng new ng-materialize
运行 npm install --save materialize-css @types/materialize-css

更新app.component.html

<ul #collapse class="collapsible" data-collapsible="accordion">
  <li>
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
</ul>

更新`app.component.ts'

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

import * as $ from 'jquery';
import 'materialize-css';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('collapse') c_element: ElementRef;

  ngAfterViewInit(): void {
    $(this.c_element.nativeElement).collapsible();
  }
}

如何使用 angular 2 的物化？

how to use materialize with angular 2?

javascript

angular2-template

angular