Question

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

例如

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>

此代码中的工具提示将不会显示。但是，如果我将代码复制到角度2组件之外，则会显示工具提示。 See Plunker example

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

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

这似乎不起作用 - 我猜是因为data-badge不是div标签的真正属性？

感谢您的帮助。

Answer 1

在所有组件上将encapsulation设置为None。 Angular默认使用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()。

另见
- How can I update/refresh Google MDL elements that I add to my page dynamically?

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

1 个答案: