Question

我在ng2中集成了材料设计（http://www.getmdl.io/）时遇到了一个小问题你能帮我么我会把它分成我所做的点

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文件包含

 <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">  在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

我建议在你的Angular组件中获得ElementRef，然后在你的一个组件生命周期钩子中的元素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，这些家伙已经制作了超酷的材料，也可以参考这个

Answer 4

我遇到了同样的问题（因为我使用的是与你相同的模板）。

试试componentHandler.upgradeAllRegistered()它会在你的情况下正常工作。

当您尝试将标头拆分为小组件时会出现另一个问题。

Answer 5

只需从ElementRef导入OnInit和angular2/core，然后将其注入构造函数：

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

}

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

Answer 6

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

Answer 7

ng2-webpack Demo project包含一个使用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();
}

有关详细信息，请参阅Working with Material Design Lite。

将Material Design Lite与Angular2集成

7 个答案:

步骤：

的问题：

问题 - 未应用MDL增强DOM效果：

解决方案：