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

回答

相關問題