angular - Material Design Lite工具提示不适用于Angular 2

我在玩角度2和材料设计lite。但是，当放置在角2组件模板中时，许多材质设计精简组件似乎会断开。
例如
应用组件

@Component({
 selector: 'this-app',
 templateUrl: 'app/app.component.html'
})
export class AppComponent {
  public message : string = "This is my Application" ;
  public menuItems : string[] = ["Personnel", "Contacts", "Accounting"];
  public appTitle : string = "Gravity HR";
  public messages : string[] = ["message 1", "Message 2", "Message 3 ", "Message 4"];
}

app.component.html软件

<main class="mdl-layout__content">
  <div class="page-content">
    <h1>{{message}}</h1>
    <div id="inbox1" class="fa fa-inbox fa-2x fa-fw  mdl-badge mdl-badge--overlap" data-badge="4"></div>
    <div for="inbox1" class="mdl-tooltip">You have {{messages.length}} messages</div>
  </div>
</main>

此代码中的工具提示将不显示。但是，如果我将代码复制到角度2组件之外，则会显示工具提示。See Plunker example
另外，我想做的另一件事是绑定到div的data badge属性，如下所示：

<div id="inbox1" class=... data-badge={{messages.length}}>

这似乎不起作用——我猜是因为data badge不是div标记的真正属性？
谢谢你的帮助。

最佳答案

在所有组件上将encapsulation设置为None。默认情况下，angular使用Emulated，并努力防止css流入和流出组件，但mdl需要能够跨组件边界应用样式。
以上仅适用于添加到组件的样式。添加到index.html的样式不会被角度重写，并且不会对这些样式应用样式范围。

import {Component, ViewEncapsulation} from 'angular2/core';

@Component({
 selector: 'this-app',
 templateUrl: 'app/app.component.html',
 encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  ngAfterViewInit() {
    componentHandler.upgradeDom();
  }
}

当dom更改时，需要调用componentHandler.upgradeDom()。
也见
How can I update/refresh Google MDL elements that I add to my page dynamically?