将Material Design Lite与Angular2集成

我在ng2中整合一个材料devise（ http://www.getmdl.io/ ）时遇到一个小问题你能帮我吗？我将把我所做的

1. http://www.getmdl.io/started/index.html#tab1 ，解释了devise的整合
2. http://www.getmdl.io/components/index.html#textfields-section ，这是一个带有浮动标签的文本字段的例子，现在我已经集成了Plunkr ，但是没有工作，你可以请看看正如你可以看到在index.html我有CSS和JS文件包含由http://www.getmdl.io/started/index.html#tab1build议

<!-- GetMDL scripts --> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <!-- GetMDL scripts -->然后在app.component.ts文件中：

 import {Component, ViewEncapsulation} from 'angular2/core'; @Component({ selector: 'my-app', template: `<form action="#"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="sample3"> <label class="mdl-textfield__label" for="sample3">Text...</label> </div> </form>`, encapsulation:ViewEncapsulation.None, }) 

Answer 1

感谢大家，像一个魅力工程，包装这个完整的解决scheme，这对我很好（用beta6testing）。 没有太多的样板代码。 我唯一不能工作的是通过*ngFordynamic添加元素，具体取决于组件variables。 请参阅模板中的dynamic elements 。 也许你们中的一个人知道如何解决这个问题。

看到一个工作的PLUNK （预览必须至less1024px宽才能看到标题）

安装MDL

 npm i material-design-lite --save 

在你的index.html中引用它

 <script src="/node_modules/material-design-lite/material.min.js"></script> <!-- from http://www.getmdl.io/customize/index.html --> <link rel="stylesheet" href="/css/customized-material.min.css"> 

创buildMaterialDesignLiteUpgradeElement.ts

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

然后在你的组件导入和注册

 import { Component } from '@angular/core'; import { MDL } from '../../../directives/MaterialDesignLiteUpgradeElement'; @Component ({ selector: 'my-component', directives: [ MDL ], templateUrl: 'app/components/Header/Header.html' }) export class Header { public dynamicArray:number[] = []; add() { this.dynamicArray.push(Math.round(Math.random() * 10)); } } 

并在您的模板中添加mdl到根组件

 <header mdl class="mdl-layout__header"> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">Home</span> <div class="mdl-layout-spacer"></div> <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" (click)="add()"> <i class="material-icons">add</i> </button> <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn"> <li class="mdl-menu__item">Static entry</li> <!-- semi dynamic, known when view is created --> <li class="mdl-menu__item" *ngFor="#nr of [1,2,3]">Semi Dynamic entry {{nr}}</li> <!-- dynamic, depends on service manipulated array --> <li class="mdl-menu__item" *ngFor="#nr of dynamicArray">Dynamic entry {{nr}}</li> </ul> </div> </header> 

Answer 2

问题是Material Design Lite并不是用于像Angular2那样的dynamic页面。 这表示应该可以通过使用MDL componentHandler.upgradeElement函数。

更多的信息可以在这里find： http : //www.getmdl.io/started/#dynamic

我build议在你的Angular组件中获得一个ElementRef ，然后在组件生命周期钩子的元素ref上调用这个函数，可能是ngAfterViewInit()

Answer 3

我能够从angualrjs渠道获得解决scheme，这是超酷解决scheme，我们必须使用componentHandler.upgradeElement(this.elementRef.nativeElement);

/ /这是做的方式

 @Directive({ selector: '[mdlUpgrade]' }) class MdlUpgradeDirective { @Input() mglUpgrade; constructor(el: ElementRef) { componentHandler.upgradeElement(el.nativeElement); } } @Component ({ selector: 'login', ... directives: [MdlUpgradeDirective] }) 

并使用HTML标签上的Directive来使用它。

有用，

注意： https ： //github.com/justindujardin/ng2-material ，这个家伙做了超酷的材料，也可以参考这个

Answer 4

我面临同样的问题（因为我使用相同的模板）。

只要尝试componentHandler.upgradeAllRegistered()它将正常工作在你的情况。

当您尝试将标题分解为小的组件时，会发生一个不同的问题。

Answer 5

只是认为这里值得一提的是，Angular 2的官方材质devise库现在是alpha.2，所以你可以考虑用它开始新的项目。

Answer 6

只需从angular2/core导入ElementRef和OnInit ，并将其注入到构造函数中即可：

 constructor(@Inject(ElementRef) elementRef: ElementRef) { this.elementRef = elementRef; 

}

然后使用ngOnInit方法，并在您使用的任何dynamic添加的标签上使用componentHandler.upgradeElement 。

Answer 7

ng2-webpack Demo项目包含一个简单的使用vanilla MDL的ng2 CRUD应用程序

脚步：

• npm install –save material-design-lite
• 在src / vendor.js中导入整个库
• 或只是所需的组件
• 在src / style / app.scss中，导入所需的组件：

问题：

问题 – 不适用MDL增强的DOM效果：

• 始终在状态变化
• 在路线变化期间

解：

 ngAfterViewInit() { // Ensure material-design-lite effects are applied componentHandler.upgradeDom(); } 

有关更多详细信息，请参阅使用Material Design Lite 。