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

Question

我正在玩Angular 2和Material Design Lite。但是，当将许多Material Design Lite组件放置在Angular 2组件模板中时似乎会损坏。

例如

app.component.ts

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

此代码中的工具提示将不会显示。但是，如果我将代码复制到angular 2组件之外，则会显示工具提示。请参阅柱塞示例

另外，我想做的另一件事是绑定到div的data-badge属性，如下所示：

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

这似乎不起作用-我猜是因为数据徽章不是div标签的真实属性吗？

谢谢你的帮助。

Answer 1

在所有组件上设置为encapsulation。NoneAngular 默认使用Emulated并尽力防止 CSS 渗入和渗出组件，但 MDL 需要能够跨组件边界应用样式。

以上仅适用于添加到组件的样式。添加到 的样式index.html不会被 Angular 重写，并且不会为这些样式应用样式范围。

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()需要调用。

另请参阅
-如何更新/刷新动态添加到页面的 Google MDL 元素？