angualr material 真正入門實踐：實踐Menu（非複製粘貼）

先吐槽一下，有些沙雕，上來介紹安裝angualr material，也不讓我們加版本號……目前material最新版是8.x版本，如果angualr cli安裝的不是8.x版本，會不兼容……所以，angular cli和material大版本一定要匹配！

1安裝material

0. 路徑切換到項目根目錄
1. ng --version 確認自己的angualr cli版本，比如我的是7.x
2. 安裝必要三個依賴

# 一定要加上和自己大版本一直的版本號，我是是@7
npm install --save @angular/material@7 @angular/cdk@7
# 這個負責動畫，不裝這個，那些彈出的動畫完全用不了，比如彈出菜單mat-menu
npm install --save @angular/animations@7

3. 根據提示，查漏補缺，把需要的依賴都補上，務必明確大版本號

2代碼實踐

以使用Mat-menu爲例，簡述使用過程：

1. app.module導入動畫模塊和菜單（Menu）模塊

...
import {MatMenuModule} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
...
  imports: [
    ...
    MatMenuModule,
    BrowserAnimationsModule
  ],

2. 全局導入material的css文件
   style.css

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

3. 模板中使用菜單標籤

<button class="mat-button" [matMenuTriggerFor]="menuButtons">菜單</button>
<mat-menu #menuButtons="matMenu">
  <button class="mat-menu-item">按鈕1</button>
  <button class="mat-menu-item">按鈕2</button>
  <button class="mat-menu-item">按鈕2</button>
</mat-menu>

mat-menu本質上只包含彈出的動畫和彈出的東西，不包括顯示“菜單”二字的按鈕，因此，“菜單”按鈕需要綁定這個能彈出的mat-menu實例，來實現點擊彈出菜單內容。

4. 不要從ts中取數據，這個方法沒有采用ts中動作控制程序彈出，還可以通過ts中的trigger實現彈出效果

3 通過MatMenuTrigger實現手動觸發

<button class="mat-button" (click)="someMethod()">菜單</button>
<mat-menu #menuButtons="matMenu"><--此處需要修改！！！！-->
  <button class="mat-menu-item">按鈕1</button>
  <button class="mat-menu-item">按鈕2</button>
  <button class="mat-menu-item">按鈕2</button>
</mat-menu>

class MyComponent {
  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
  someMethod() {
    this.trigger.openMenu();
  }
}