将 Material Design Lite 与 Angular2 集成 [英] Integrating Material Design Lite with Angular2

问题描述

我在 ng2 中集成材料设计 (http://www.getmdl.io/) 时遇到了一个小问题你能帮我么我会把我做过的事情记下来

1. http://www.getmdl.io/started/index.html#tab1，解释说设计的整合
2. http://www.getmdl.io/components/index.html#textfields-section，这是一个带有浮动标签的文本框的例子现在我有 Plunkr，我集成了它，但没有用你能看看吗正如您在 index.html 中看到的，我包含 http://www 建议的 css 和 js 文件.getmdl.io/started/index.html#tab1

<代码><!-- GetMDL脚本--><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脚本-->在 app.component.ts 文件中:

import {Component, ViewEncapsulation} from 'angular2/core';@成分({选择器:'我的应用'，模板:`<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>

`,封装:ViewEncapsulation.None，})

解决方案

我能从angualrjs频道得到解决方案，这是一个超酷的解决方案，我们必须使用的源componentHandler.upgradeElement(this.elementRef.nativeElement);

//这是制作方法

@Directive({选择器:'[mdlUpgrade]'})类 MdlUpgradeDirective {@Input() mglUpgrade;构造函数(el:ElementRef){componentHandler.upgradeElement(el.nativeElement);}}@成分 ({选择器:'登录'，...指令:[MdlUpgradeDirective]})

并在 HTML 标签上使用指令来使用它.

有效，

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

I have a small problem in integrating a meterial design (http://www.getmdl.io/) in ng2 Can you please help me I will put it in points what I have done

1. http://www.getmdl.io/started/index.html#tab1, explains the integration of the design
2. http://www.getmdl.io/components/index.html#textfields-section, this is an example of textfield with floating label and now I Have the Plunkr, which I integrated, but DID NOT WORK can you please have a look As you can see in the index.html I have the css and js files inclustion as suggested by http://www.getmdl.io/started/index.html#tab1

<!-- 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 --> And in the app.component.ts file :

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,
})

解决方案

I am able to get the solution from angualrjs channel, and it is super cool solution, ofource we have to use componentHandler.upgradeElement(this.elementRef.nativeElement);

//This is the way to make the

@Directive({
  selector: '[mdlUpgrade]'
})
class MdlUpgradeDirective {
  @Input() mglUpgrade;

  constructor(el: ElementRef) {
    componentHandler.upgradeElement(el.nativeElement);
  }
}

@Component ({
  selector: 'login',
   ...
  directives: [MdlUpgradeDirective]
})

and use the Directive on the HTML tags to use it.

It works,

NOTE: https://github.com/justindujardin/ng2-material , this guys has made super cool material stuff, can refer this too

这篇关于将 Material Design Lite 与 Angular2 集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！