Angular2 ngFor使用Material Design Lite的元素

时间:2016-03-28 11:04:07

标签: angular material-design material-design-lite

我很难通过* ngFor使Material Design Lite组件与动态添加的元素一起使用。我知道我需要调用componentHandler.upgradeElement,但是我该把这个调用放在哪里?我正在尝试thisthis指令,但它们似乎不起作用。 具体来说,我需要在我的数组的每个项目上使用mdl-menu。关于在哪里看的任何建议?

2 个答案:

答案 0 :(得分:1)

TLDR; 在将元素注入DOM之后,需要调用componentHandler.upgradeElement。我在过去使用的方法在下面的示例中描述。

编辑如果你想要一个声明性的解决方案this approach here看起来很不错,但我自己并没有使用它。

我创建了一个包装Material Lite componentHandler

的服务
import { Injectable } from '@angular/core';

export interface ComponentHandler {
    upgradeDom();

}

declare var componentHandler: ComponentHandler;


@Injectable()
export class MaterialService {
    handler: ComponentHandler;
    constructor() {
        this.handler = componentHandler;
    }

    // render on next tick
    render() {
        setTimeout(() => { this.handler.upgradeDom(); }, 0);
    }

}

然后在组件将元素注入DOM后调用服务的渲染功能。在你的情况下,这是在*ngFor

之后

这是一个非常人为的例子,但展示了"其中"调用渲染

import { Component, OnInit } from '@angular/core';
import { DataService } from 'services/data.service';
import { MaterialService } from 'services/material.service';

@Component({
    selector: 'app-thing',
    templateUrl: `
       <ul>
            <li *ngFor="let item of data">
              {{data}}
            </li>
       </ul>
    `
})
export class ThingComponent implements OnInit {
    data: string[]
    constructor(
        private service: DataService,
        private material: MaterialService
    ) { }

    ngOnInit() {
        this.service.getData()
        .subscribe(data => {
            this.data = data;
            this.material.render();
        });
     }
}

答案 1 :(得分:1)

问题:MDL无法监视动态创建的DOM元素。

解决方案:MDL库将componentHandler属性添加到Window对象上。 在要动态添加元素的组件的ngOnInit()方法内执行以下代码。

setTimeout(() => {
  window['componentHandler'].upgradeDom();
}, 0);