Typescript 集成材料设计Lite和Angular2

我在ng2中集成材料设计（）时遇到了一个小问题 你能帮帮我吗 我将用我所做的来说明这一点

，说明了设计的集成

，这是带有浮动标签的textfield示例 现在我有了，我整合了，但没有工作 你能看一下吗 正如您在index.html中所看到的，我已经按照

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

从'angular2/core'导入{组件，视图封装}；
@组成部分({
选择器：“我的应用程序”，
模板：`
文本。。。
`,
封装：viewEncapsation.None，
})

问题在于Material Design Lite的设计不适合与Angular2生成的动态页面一起使用。也就是说，应该可以使用MDL

componentHandler.upgradeElement

函数

有关这方面的更多信息，请参见：

---

我建议在您的Angular组件中获得一个

ElementRef

，然后在组件生命周期挂钩中的元素ref上调用此函数，可能

ngAfterViewInit（）

只需从

angular2/core

导入

ElementRef

和

OnInit

，并将其注入构造函数即可：

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

}

---

然后使用

ngOnInit

方法，在您使用的任何动态添加的标记上使用

componentHandler.upgradeElement

。

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

只需尝试

componentHandler.upgradeAllRegistered（）

就可以了

---

当您尝试将收割台拆分为小组件时，会出现另一个问题。

我能够从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标记上的指令来使用它

它起作用了

注意：，这家伙做了超酷的材料，也可以参考这个
谢谢伙计们，
它像一个符咒一样工作，可以总结成一个完整的解决方案，对我来说非常有效（用beta6测试）。没有太多的样板代码。我唯一没有开始工作的是根据组件变量通过
*ngFor
动态添加元素。请参见模板中的
动态元素
。也许你们中的一个知道怎么避开这个

查看工作（预览必须至少为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">

然后在组件中导入并注册它

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>


家
添加
更多

静态输入
半动态输入{{nr}
动态条目{{nr}

<代码> > P.>这里值得一提的是，官方图书馆现在处于alpha 2。因此，您可以考虑使用它启动新项目。
 < P> NG2 WebPACK包含一个使用香草MDL 
的简单NG2 CRUD应用程序。
步骤：

npm安装--节省材料设计精简版
在src/vendor.js中导入整个库
或者仅仅是所需的组件
在src/style/app.scss中，导入所需的组件：

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

在状态更改期间保持一致
更改路线期间

解决方案：
有关更多详细信息，请参阅。
u是否实际同时使用MDL+ng2材料？您是否对MDL组件有任何问题（angular2为每个停止其视图的组件创建父标记/选择器）？我发现调用
componentHandler.upgradeElement（el.nativeElement）时效果更好
在
ngAfterViewInit（）
中（否则，在其他指令（如
ngModel
）生效之前会进行升级），我不是对您提供的解决方案提出质疑，只是澄清了您提供的链接。上面提到的文章是参考Material2，而不是Material Design Lite，这是不同的。@Helzgate，如果你读了整行，你会有一个想法，它基本上是其他设计的参考。我不得不说，我很困惑，为什么简单地在html元素上添加类的解决方案需要如此复杂？这里的答案非常有用，但我发现它们在处理路由器呈现的组件时是不够的。如果您遇到与路由器相关的问题，您可能会感兴趣（并回答）。谢谢Rob，这非常有帮助。您注意到无法添加动态元素。这不是你对菜单项所做的吗？也许你可以进一步解释。嗨，史蒂夫，基本上是运行时生成的任何东西。半动态素材可以在OnInit激发之前生成，因为[1,2,3]是已知的，因此可以渲染相应的视图。DynamicCarray的内容不是。我们切换到ng2材质，对我们来说效果更好。一个更好的解决方案是在根应用程序组件上使用
AfterViewChecked
接口，以便只执行一次。在这里查看我的完整答案：我正在获取的指令不存在于类型组件中。。。还有人遇到过这个吗？我是否需要同时使用beta版本（“angular2/core”）和发布版本（“angular2/core”）才能工作？对于加载初始视图后动态添加的元素，可以尝试使用
ngAfterContentChecked（）
而不是
AfterViewChecked
。I loo
<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>

ngAfterViewInit() {
    // Ensure material-design-lite effects are applied
    componentHandler.upgradeDom();
}