将 Material Design Lite 与 Angular2 集成

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 中看到的，我有 css 和 js 文件包含，如 http://www.getmdl.io/started/index.html#tab1

 <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

问题是 Material Design Lite 并非设计用于 Angular2 生成的动态页面。那就是说应该可以使用 MDL componentHandler.upgradeElement 函数。

可在此处找到更多相关信息： http://www.getmdl.io/started/#dynamic

我建议在您的 Angular 组件中获取一个 ElementRef，然后在您的组件生命周期挂钩之一的元素 ref 上调用此函数，可能 ngAfterViewInit()

Answer 2

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

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

}

然后使用 ngOnInit 方法并对您使用的任何动态添加的标签使用 componentHandler.upgradeElement。

Answer 3

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

只需尝试 componentHandler.upgradeAllRegistered() 它就适合您的情况。

当您尝试将 header 分解成小组件时会出现不同的问题。

Answer 4

我可以从 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，这家伙制作了超级酷的material东西，也可以参考

Answer 5

谢谢大家，就像一个魅力，将其包装成一个完整的解决方案，对我来说效果很好（使用 beta6 测试）。没有太多样板代码。我唯一没有开始工作的是根据组件变量通过 *ngFor 真正动态添加的元素。请参阅模板中的 dynamic elements。也许你们当中有人知道如何解决这个问题。

查看工作 plunkr（预览必须至少为 1024 像素宽才能看到 header）

安装 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 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 集成

Integrating Material Design Lite with Angular2

integration

typescript

angular

步骤：

问题：

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

解决方案：