Question

我正在使用 Angular 2的材质设计，我刚刚开始，我正在尝试使用 MdMenu 来显示屏幕时的菜单体积小。我的问题是菜单总是打开，永远不会关闭，我不明白它是如何工作的。在我第一次使用Material设计时，我正在为Angular 2使用 Flex-Layout 。

这是我的代码

应用-container.component.html

<md-card fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
  <div fxFlex="50" fxLayoutGap="10px" fxLayout="row" fxLayoutAlign="start center" fxHide.lt-md="true">
    <button md-button class="title">UniNow</button>
    <button md-button>
      <md-icon>home</md-icon>
      <span>Home</span>
    </button>
    <button md-button>
      <md-icon>work</md-icon>
      <span>Lavoro</span>
    </button>
  </div>
  <div fxFlex="50" fxLayoutGap="10px" fxLayout="row" fxLayoutAlign="end center" fxHide.lt-md="true">
    <button md-button>
      <span>{{user.firstName}}</span>
    </button>
    <img src="/assets/profile-image.jpg" style="width: 50px; height: 50px; border-radius: 50%">
  </div>
  <div fxLayoutAlign="start center" fxFlex="50" fxShow.gt-sm="false" fxShow.lt-md="true" >
    <button md-button class="title">UniNow</button>
  </div>
  <div fxFlex="50" fxShow.gt-sm="false" fxShow.lt-md="true" fxLayoutAlign="end center">
    <button md-icon-button [mdMenuTriggerFor]="menu">
      <md-icon>more_vert</md-icon>
    </button>
  </div>
  <md-menu #menu="mdMenu" [overlapTrigger]="false">
    <button md-menu-item class="menu-button">Item 1</button>
    <button md-menu-item class="menu-button">Item 2</button>
  </md-menu>
</md-card>

应用-container.component.ts

import { Subscription } from 'rxjs/Rx';
import { Student } from '../model/student';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { AppContainerService } from './app-container.service';
import 'rxjs/add/operator/switchMap';

import { Component, OnDestroy, OnInit } from '@angular/core';

@Component({
  selector: 'app-un-app-container',
  templateUrl: './app-container.component.html',
  styleUrls: ['./app-container.component.scss']
})
export class AppContainerComponent implements OnInit {

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private appContainerService: AppContainerService
  ) {}

  user: Student;
  userId: string;

  studentGet$: Subscription;

  ngOnInit(): void {
    this.studentGet$ = this.route.paramMap
      .switchMap((parametroId: ParamMap) => {
        this.userId = parametroId.get('idutente');
        return this.appContainerService.getStudent(this.userId);
      })
      .subscribe(user => {
        this.user = user;
      });
  }

}

应用-container.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MdMenuModule, MdCardModule, MdButtonModule, MdIconModule } from '@angular/material';

import { AppContainerRoutingModule } from './app-container-routing.module';

import { AppContainerService } from './app-container.service';
import { AppContainerComponent } from './app-container.component';

@NgModule({
  imports: [
    CommonModule,
    FlexLayoutModule,
    MdCardModule,
    MdButtonModule,
    MdIconModule,
    MdMenuModule,
    AppContainerRoutingModule,
  ],
  declarations: [
    AppContainerComponent,
  ],
  providers: [
    AppContainerService,
  ]
})
export class AppContainerModule { }

应用-container.component.scss

@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600');

$uninow-app-primary: #1976D2;
$uninow-app-accent: #CDDC39;
$uninow-app-warn: #F44336;
$uninow-app-primary-light: #BBDEFB;
$uninow-text-primary-color: #FFFFFF;
$uninow-secondary-text-color: #757575;
$uninow-text-primary-color-light: #212121;
$uninow-divider-color: #BDBDBD;



md-card.mat-card {
  background-color: $uninow-app-primary;
  border-radius: 0;
  padding: 10px;
}

button {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  color: $uninow-text-primary-color;
  font-weight: 700;
}

button.title {
  color: $uninow-text-primary-color;
  font-size: 32px;
  font-family: 'Slabo 27px', serif;
  font-weight: 300;
}

button.menu-button {
  color: $uninow-text-primary-color-light;
}

这是当我点击菜单按钮，然后点击到处关闭它（但它仍然打开）后的结果：

Image when i click the button on small screen

After I clicked and enlarged the viewport

我正在Google Chrome版本61.0.3163.100上进行测试

Answer 1

我收到错误是因为 user.firstName 最初为null，导致与MdMenu发生了一些奇怪的互动。

我解决了初始化用户并将其所有属性设置为空字符串的问题。

MdMenu始终保持开放状态，永不闭合，角度2 +

1 个答案: