Question

尝试使用材质设计精简版菜单但是菜单永远不会出现在屏幕上。虽然研究发现问题是Material Design Lite并未设计为与动态页面一起使用。

找到了一些解决方案，但似乎没有用

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

中实现菜单

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

Material Design lite菜单在角度2中不起作用

1 个答案: