Material Designライトメニューが角2で機能しない

Question

マテリアルデザインライトメニューを使用しようとしていますが、画面にメニューが表示されません。研究では問題がマテリアルデザインライトであることが判明しましたが、ライトは動的ページで使用するようには設計されていません。

は、いくつかの解決策が見つかりましたが

MDL not fully working with Angular2

ここ

https://github.com/google/material-design-lite/issues/4243

https://getmdl.io/started/#dynamic

Integrating Material Design Lite with Angular2働いていないように見えるapp.component.tsある

import { Component } from '@angular/core'; 
var componentHandler: any; 
@Component({ 
    selector: 'my-app', 
    templateUrl: 'Home/HomePage', 
}) 
export class AppComponent {} 

HomePage.cstml

<button id="test1" 
     class="mdl-button mdl-js-button mdl-button--icon"> 
    <i class="material-icons">more_vert</i> 
</button> 

<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" 
    for="test1"> 
    <li class="mdl-menu__item">Mobile App</li> 
    <li class="mdl-menu__item">Customer Care</li> 
    <li class="mdl-menu__item">Track Order</li> 
    <li class="mdl-menu__item">Log in</li> 
</ul> 

研究は、私がcomponentHandler.upgradeElementまたはcomponentHandler.upgradeDom（）を使用しなければならないことがわかったものの、またはcomponentHandler.upgradeAllRegistered（）;。しかし、まさに私は、私がどこでそれを使用しなければならないか分からない。

誰も私がどのように私は、角2

Answer 1

でメニューを達成することができます教えてください。この今

import { Component } from '@angular/core'; 
declare var window: any; 
@Component({ 
    selector: 'my-app', 
    templateUrl: 'Home/HomePage', 

}) 
export class AppComponent { 
    ngAfterViewInit() { 
     window.componentHandler.upgradeAllRegistered(); 
    }}