3

当使用带有@angular/material 的md-menu 时，无论我如何堆叠组件，所述菜单都会在我的路由器插座下方打开。我在这里想念什么？

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 { }

应用程序.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 {
}

导航组件.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css'] # No styles applied.
})
export class NavComponent {
}

导航组件.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 块下方打开。在内容上打开菜单我错过了什么？

我也遇到了 Firefox 的问题，其中单击菜单外部不会将菜单折叠回来。经过一番挖掘，我知道这很可能是 Material 的一个错误。我不相信它们是相关的，但是我也不相信我大部分时间都知道我在说什么……这就是我将其包括在此处的原因。谢谢！

4

1 回答 1

4

问题是我没有声明一个全局主题，如 github文档中描述的angular/material

这是通过将以下内容添加到我的根样式中来完成的：

样式.css

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

或者，您可以在 index.html 中添加一个链接。

<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">

顺便说一句：这也修复了我的 Firefox 错误

于 2016-12-22T00:55:45.473 回答