[英]how to use materialize with angular 2?
已經有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
由於您沒有提供很多代碼文件,因此很難回答您的特定情況。 關於如何使用角度2實現的問題? 但是,這是使兩者協同工作的可證明方法。
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(); } }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.