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

我正在玩Angular 2和Material Design Lite。但是，许多Material Design Lite组件在放置到Angular 2组件模板中时似乎会断裂。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>

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

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

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

似乎并没有得以顺利 - 我猜是因为数据徽章不是div标签的真正属性？

感谢您的帮助。

来源

2016-03-08 RHarris

在所有组件上设置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?

来源

2016-03-09 15:12:10

我累了添加这些更改普拉克例子，它似乎没有有所作为 -

也
见。有什么想法吗？ – RHarris

通过我的上述改变，它可以在Firefox中使用，但不能在Chrome中使用。也许与Plunker有关，但一般来说这应该是修复。 –

顺便说一句，有关如何绑定到数据徽章属性的任何想法，以便我可以动态更新徽章值？ – RHarris

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

回答

相关问题