材料设计精简版提示与角2个工作 [英] Material Design Lite tooltips not working with Angular 2

问题描述

我既角2和材料设计精简版玩耍。然而，许多材料设计精简版的组件似乎放在一个角2分量模板中时打破。

I'm playing around with both Angular 2 and Material Design Lite. However, many of the Material Design Lite components seem to break when placed inside an Angular 2 component template.

例如

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>

在此code中的提示将不会显示。但是，如果我复制code角2组件，工具提示显示之外。 见Plunker例如

The tooltips in this code will not display. However if I copy the code outside of the angular 2 component, the tool tip displays. See Plunker example

另外，我希望能够做的另一件事就是绑定到div一种像这样的数据徽章属性：

Also, the other thing I would like to be able to do is bind to the data-badge property of the div kind of like this:

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

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

That doesn't seem to work -- I'm guessing because data-badge isn't a true property of the div tag?

感谢您的帮助。

推荐答案

设置封装到无在所有组件。角使用仿真默认并力图prevent CSS出血进出的组件，但MDL需要能够跨组件边界应用样式。

Set encapsulation to None on all your components. Angular uses Emulated by default and tries hard to prevent CSS bleeding in and out of components but MDL needs to be able to apply styles across component boundaries.

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（）需要被调用。

When the DOM is changed componentHandler.upgradeDom() needs to be called.

另请参阅结果
- <一个href=\"http://stackoverflow.com/questions/32363511/how-can-i-update-refresh-google-mdl-elements-that-i-add-to-my-page-dynamically\">How我可以更新/刷新我添加到我的动态页面谷歌MDL元素？

这篇关于材料设计精简版提示与角2个工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！