使用Material Design Lite的Angular2 ngFor元素

Question

我正在努力使Material Design Lite組件通過* ngFor使用動態添加的元素。 我知道我需要調用componentHandler.upgradeElement，但是我該把這個調用放在哪里？ 我正在嘗試這個和這個指令，但它們似乎不起作用。 具體來說，我需要在我的數組的每個項目上使用mdl-menu。 關於在哪里看的任何建議？

Answer 1

TLDR; 在將元素注入DOM之后，需要調用componentHandler.upgradeElement。 我在過去使用的方法在下面的示例中描述。

編輯如果你想要一個聲明性的解決方案， 這種方法在這里看起來非常好，但我自己並沒有使用它。

我創建了一個包裝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后調用服務的render函數。 在你的情況下，這是在*ngFor

這是一個非常人為的例子，但演示了“where”來調用render

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

Answer 2

問題：MDL不會監視動態創建的DOM元素。

解決方案：MDL庫將componentHandler屬性添加到Window對象上。 在要動態添加元素的組件的ngOnInit（）方法中執行以下代碼。

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