材料设计lite菜单不能在角度2中工作

尝试使用材料设计lite菜单但是菜单永远不会出现在屏幕上。虽然研究发现问题在于Material Design Lite并非设计用于动态页面。材料设计lite菜单不能在角度2中工作

找到为数不多的解决方案，但似乎没有奏效

Integrating Material Design Lite with Angular2

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

这里是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

来源

2017-07-28 San Jaisy

你尝试https://material.angular.io/？ –

不，我没有使用材料设计lite。你能不能让我知道我该如何解决这个问题 –

不，我不知道答案。 MDL不是为Angular2设计的，而试图适应这两者将是一项巨大的工作。我太懒了。 –

这解决我的问题菜单现在

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

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

来源

2017-07-28 05:53:37

材料设计lite菜单不能在角度2中工作

回答

相关问题