angular - MdMenu 始终保持打开状态，从不关闭，角度 2+

Question

我正在为 Angular 2 使用 Material design，我刚刚开始，我正在尝试使用MdMenu以便在屏幕尺寸较小时显示菜单。我的问题是菜单始终保持打开状态，从不关闭，我不明白它是如何工作的。在我第一次体验 Material design 时，我也在为 Angular 2 使用Flex-Layout。

这是我的代码

app-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>

应用容器.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;
      });
  }

}

应用容器.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 { }

应用容器.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;
}

这是我单击菜单按钮时的结果，然后单击各处以关闭它（但它仍然处于打开状态）：

当我点击小屏幕上的按钮时的图像