Angular2 ngPer elementi con Material Design Lite

Question

Non riesco a rendere il componente Material Design Lite compatibile con elementi aggiunti dinamicamente tramite * ngFor. Capisco che ho bisogno di chiamare componentHandler.upgradeElement, ma dove metto questa chiamata? Stavo cercando le direttive this e this ma non sembrano funzionare. In particolare, ho bisogno di mdl-menu su ogni elemento del mio array. Qualche suggerimento su dove guardare?

Answer 1

TLDR; È necessario chiamare componentHandler.upgradeElement dopo che gli elementi sono stati iniettati nel DOM. Un approccio che ho usato in passato è descritto nell'esempio seguente.

EDIT Se si desidera una soluzione dichiarativa this approach here sembrare una abbastanza buona, ma non ho usato io.

ho creato un servizio che avvolge il materiale 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); 
    } 

} 

Poi si chiama la funzione di rendering del servizio dopo che il componente ha iniettato gli elementi nel DOM. Nel tuo caso questo è dopo il *ngFor

Questo è un esempio molto artificiosa, ma dimostra "dove" per chiamare il rendering

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