我正在玩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}}>
这似乎不起作用 – 我猜测因为数据徽章不是div标签的真正属性？
谢谢你的帮助.
解决方法
在所有组件上将封装设置为“无”. 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?
