将Material Design Lite与Angular2集成

Question

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

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

<!-- 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

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

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

安装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">

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

<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生成的动态页面.这说明应该可以使用MDL componentHandler.upgradeElement功能.

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

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

Answer 3

我能够从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,这个家伙已经制作了超酷的材料,也可以参考这个