如何在Angular2中集成Material Design Lite

我在集成meterial design到Angular2中遇到了一個小問題你能幫我嗎我將它寫成了我所做的我使用的是最新版本的angular2，MDL框架不起作用如何在Angular2中集成Material Design Lite

如何在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" 
    }

材料-design-lite -version v1.2.1

來源

2016-11-08 sridharan

什麼問題補充呢？ –

MDL框架不工作 – sridharan

「不工作」是相當無用的術語。預期的行爲是什麼？什麼是實際行爲？ –

如果使用角CLI，在角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

來源

2016-12-08 12:53:10 timzok

如何在Angular2中集成Material Design Lite

回答

相關問題