Angular2材质:Md-Menu在路由器出口下方打开 [英] Angular2 Material: Md-Menu opens below router outlet
问题描述
当将md-menu与@ angular/material一起使用时,无论我如何堆叠组件,上述菜单都会在路由器出口下方打开.我在这里想念什么?
When using md-menu with @angular/material, said menu opens below my router outlet no matter how i stack the components. What am i missing here?
app.modules.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Router } from '@angular/router';
import { MaterialModule } from '@angular/material';
import { MdButtonModule } from '@angular/material';
import { MdIconModule } from '@angular/material';
import { AppComponent } from './app.component';
import { ROUTES } from './app.routes';
import { ErrorComponent } from './error.component';
import { HomeComponent } from './home/home.component';
import { NavComponent } from './nav/nav.component';
import { LoginComponent } from './login/login.component';
@NgModule({
declarations: [
AppComponent,
ErrorComponent,
HomeComponent,
NavComponent,
LoginComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MdButtonModule,
MdIconModule,
RouterModule.forRoot(ROUTES),
MaterialModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.routes.ts
import {Routes} from '@angular/router';
import {AppComponent} from './app.component';
import {ErrorComponent} from './error.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
export const ROUTES: Routes = [
{path: '', component: HomeComponent },
{path: 'login', component: LoginComponent },
{path: '**', component: ErrorComponent}
];
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-nav></app-nav>
<router-outlet></router-outlet>
`
})
export class AppComponent {
}
nav.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css'] # No styles applied.
})
export class NavComponent {
}
nav.component.html
<md-toolbar>
<button md-icon-button [md-menu-trigger-for]="menu">
<md-icon class="dark"> menu </md-icon>
</button>
<md-menu #menu="mdMenu">
<button md-menu-item [routerLink]="['']">Home</button>
<button md-menu-item [routerLink]="['login']">Login</button>
<button md-menu-item> Help </button>
<button md-menu-item disabled> Sign Out </button>
</md-menu>
</md-toolbar>
home.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html'
})
export class HomeComponent {
}
home.component.html
<p> With a bunch of ipsum <p>
如上所述,当单击菜单时,它在我的<p>
ipsum块下面打开.打开内容菜单会丢失什么?
As stated above, when clicking on the menu, it opens below my block of <p>
ipsum. What am i missing to have the menu open over the content?
我也遇到了Firefox的问题,其中在菜单外单击不会使菜单退回.经过一番挖掘后,我了解到这很可能是Material的错误.我不相信他们之间的联系,但是我也不相信我大部分时间都在谈论……这就是为什么我将其包含在这里的原因.谢谢你!
I am also experiencing an issue with firefox wherein clicking outside the menu does not collapse the menu back. After some digging, I understand this is most likely a bug with Material. I don't believe they are related however I also don't believe I know what I'm talking about most of the time... This is why i included it here. Thanks SO!
推荐答案
The issue was that I hadn't declared a global theme as described in the github docs for angular/material
这是通过在我的根样式中添加以下内容来实现的:
This was accomplished by adding the following to my root styles:
styles.css
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
或者,您可以在index.html中添加一个链接.
Alternatively, you can add a link into your index.html.
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
顺便说一句:这也修复了我的Firefox错误
BTW: This also fixed my Firefox bug as well
这篇关于Angular2材质:Md-Menu在路由器出口下方打开的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!