将Material Design Lite与Angular2集成

我有一个集成设计材质(一个小问题http://www.getmdl.io/在NG2)你能帮帮我,我就会把它在点我做了什么

http://www.getmdl.io/started/index.html#tab1,解释了设计的集成

http://www.getmdl.io/components/index.html#textfields-section,这是一个带有浮动标签的文本字段示例,现在我已经整合了Plunkr,但是没有工作可以请你看看正如您在index.html中看到的那样,我有http://www.getmdl.io/started/index.html#tab1建议的css和js文件包含

在app.component.ts文件中:

import {Component, ViewEncapsulation} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `

  

    
    Text...
  
`,
encapsulation:ViewEncapsulation.None,
})

小智.. 38

谢谢你们,像魅力一样,将这个包装成一个完整的解决方案,对我来说很有效(用beta6测试).没有太多的样板代码.我唯一没有开始工作的是动态添加元素,*ngFor这取决于组件变量.dynamic elements在模板中查看.也许你们其中一个人知道怎么解决这个问题.

查看工作的plunkr(预览必须至少1024px宽才能看到标题)

安装MDL

npm i material-design-lite --save

在index.html中引用它

创建 MaterialDesignLiteUpgradeElement.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到根组件

    

      Home
      


      
          add
      
      
          more_vert
      
      

          
Static entry

          
          
Semi Dynamic entry {{nr}}

          
          
Dynamic entry {{nr}}
      
  

更好的解决方案是使用`AfterViewChecked`接口在根应用程序组件上只能执行一次.请在此处查看我的完整答案:http://stackoverflow.com/a/39040342/1969987 (3认同)

---

Zyzle.. 9

问题是Material Design Lite不适用于像Angular2生成的动态页面.这说明应该可以使用MDL componentHandler.upgradeElement功能.

有关这方面的更多信息,请访问:http: //www.getmdl.io/started/#dynamic

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

1> 小智..：

---

谢谢你们,像魅力一样,将这个包装成一个完整的解决方案,对我来说很有效(用beta6测试).没有太多的样板代码.我唯一没有开始工作的是动态添加元素,*ngFor这取决于组件变量.dynamic elements在模板中查看.也许你们其中一个人知道怎么解决这个问题.

查看工作的plunkr(预览必须至少1024px宽才能看到标题)

安装MDL

npm i material-design-lite --save

在index.html中引用它

创建 MaterialDesignLiteUpgradeElement.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到根组件

    

      Home
      


      
          add
      
      
          more_vert
      
      

          
Static entry

          
          
Semi Dynamic entry {{nr}}

          
          
Dynamic entry {{nr}}
      
  

---

更好的解决方案是使用`AfterViewChecked`接口在根应用程序组件上只能执行一次.请在此处查看我的完整答案:http://stackoverflow.com/a/39040342/1969987

2> Zyzle..：

---

问题是Material Design Lite不适用于像Angular2生成的动态页面.这说明应该可以使用MDL componentHandler.upgradeElement功能.

有关这方面的更多信息,请访问:http: //www.getmdl.io/started/#dynamic

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

3> RONE..：

---

我能够从angualrjs频道获得解决方案,这是我们必须使用的超酷解决方案 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标记上的指令来使用它.

有用,

注意:https://github.com/justindujardin/ng2-material,这个家伙已经制作了超酷的材料,也可以参考这个