Question

我在Angular2中整合meterial design时遇到一个小问题。请你帮助我，我会说明我所做的事情我使用最新版本的angular2，MDL框架不起作用

如何在Angular2中集成Material Design Lite？问题由于代码是旧版本，lib是新版本。

npm install material-design-lite --save

<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<link rel="stylesheet" href="/app/themes/material.deep_purple-purple.min.css">
<script src="/node_modules/material-design-lite/material.min.js"></script>

在MaterialDesignLiteUpgradeElement.ts文件中：

import {Directive, AfterViewInit} from '@angular/core';
declare var componentHandler: any;
@Directive({
    selector: '[mdl]'
})    
export class MdlUpgradeDirective implements AfterViewInit {
    ngAfterViewInit() {
    if (componentHandler) {
        componentHandler.upgradeAllRegistered();
    }
 }
}

在app.component.ts文件中：

import { Component, NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MdlUpgradeDirective } from '../app/directives/MaterialDesignLiteUpgradeElement';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ MdlUpgradeDirective ],
  bootstrap:    [ AppComponent ]
})
@Component ({
  selector: 'my-app',
  templateUrl: '../app/app.component.html'
})
    export class AppComponent {
     }

的package.json

"dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "angular-in-memory-web-api": "~0.1.13",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3"
  }

material-design-lite -version v1.2.1

Answer 1

如果使用Angular cli，请在angular-cli.json

中添加

   "styles": [
      "../node_modules/material-design-lite/material.css",
      "../node_modules/material-design-icons/iconfont/material-icons.css"
  ],
  "scripts": [
      "../node_modules/material-design-lite/material.min.js"
  ],

Code here

如何在Angular2中集成Material Design Lite

1 个答案: