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

发布时间：2020-12-17 17:16:05 所属栏目：安全来源：网络整理

导读：我正在玩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 {

我正在玩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?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!