Angular2 ngFor 元素与 Material Design Lite答案

【问题标题】：Angular2 ngFor elements with Material Design LiteAngular2 ngFor 元素与 Material Design Lite
【发布时间】：2016-07-15 15:11:53
【问题描述】：

我正在努力使 Material Design Lite 组件能够通过 *ngFor 处理动态添加的元素。我知道我需要调用 componentHandler.upgradeElement，但是我应该在哪里调用呢？我正在尝试 this 和 this 指令，但它们似乎不起作用。具体来说，我的数组的每个项目都需要 mdl-menu。关于在哪里看的任何建议？

【问题讨论】：

标签： angular material-design material-design-lite

【解决方案1】：

TLDR; 您需要在元素被注入 DOM 后调用 componentHandler.upgradeElement。下面的示例描述了我过去使用的一种方法。

编辑如果您想要一个声明性解决方案this approach here 似乎是一个不错的解决方案，但我自己没有使用它。

我创建了一个包装 Material Lite 组件处理程序的服务

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();
        });
     }
}

【讨论】：

【解决方案2】：

问题：MDL 不监视动态创建的 DOM 元素。

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

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

【讨论】：