使用Material Design Lite的Angular2 ngFor元素

Question

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

Answer 1

太长了；在将元素注入 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 后，调用服务的渲染函数。就你而言，这是在之后*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();
        });
     }
}