2016-03-28 13 views
6

Material Design Liteコンポーネントを* ngForを介して動的に追加された要素と連携させるために苦労しています。私はcomponentHandler.upgradeElementを呼び出す必要があることを理解していますが、この呼び出しをどこに置くのですか?私はthisthisディレクティブを試していましたが、うまくいかないようです。 具体的には、私の配列の各項目にmdl-menuが必要です。どこを見るかに関する提案はありますか?Angular2 ng For Material Design Liteを持つ要素

答えて

1

TLDR;要素がDOMに注入された後で、componentHandler.upgradeElementを呼び出す必要があります。私が過去に使ったアプローチは、以下の例で説明されています。

EDIT宣言的ソリューションthis approach hereをかなり良いものに見せたいが、私はそれを自分で使っていない。

私はマテリアルライト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(); 
     }); 
    } 
} 
関連する問題