Angular Material2初体验

官方文档

官网上对于版本之类的没有进行说明，开始踩了一些坑，compile各种报错，最后发现是angular版本之类的问题导致的包依赖不存在，感觉官方文档是写给大佬看的，对于初学者不是很友好。总之最后成功了就好，就当锻炼了一番折腾能力。

环境准备

笔者所使用的Material是版本2了，再使用官网给出的命令安装的时候@material前缀的模块都是6.0+的版本，依赖的Angular版本也需要是6.0以上的。你也可以使用5.0版本的，反正Angular版本和你安装的Angular Material版本必须要一致，否则就会出现跟我类似的包依赖问题。

• 安装node（直接去官网下载点击安装即可）
• 安装Angular-cli（后边的命令安装的默认是最新版本）

  1	npm install -g @angular/cli

开始

1.初始化angular项目
    #material-demo是项目名称
    ng new material-demo
2.安装material相关依赖
    cd material-demo
    npm install --save @angular/material @angular/cdk @angular/animations
3.配置material的动画和引入使用组件模块
    将BrowserAnimationsModule加入到你项目的AppModule中。
    import {BrowserModule} from '@angular/platform-browser';
    import {NgModule} from '@angular/core';

    import {AppComponent} from './app.component';
    import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
    import {MaterialBaseModule} from './common/material-base.module';
    import {NavComponent} from './nav/nav.component';
    import {LayoutModule} from '@angular/cdk/layout';
    import {
        MatToolbarModule,
        MatButtonModule,
        MatSidenavModule,
        MatIconModule,
        MatListModule,
        MatGridListModule,
        MatCardModule,
        MatMenuModule,
        MatTableModule,
        MatPaginatorModule,
        MatSortModule
    } from '@angular/material';
    import {DashboardComponent} from './dashboard/dashboard.component';
    import {TableComponent} from './table/table.component';

    @NgModule({
        declarations: [
            AppComponent,
            NavComponent,
            DashboardComponent,
            TableComponent
        ],
        imports: [
            BrowserModule,
            BrowserAnimationsModule,
            MaterialBaseModule,
            LayoutModule,
            MatToolbarModule,
            MatButtonModule,
            MatSidenavModule,
            MatIconModule,
            MatListModule,
            MatGridListModule,
            MatCardModule,
            MatMenuModule,
            MatTableModule,
            MatPaginatorModule,
            MatSortModule
        ],
        providers: [],
        bootstrap: [AppComponent]
    })
    export class AppModule {
    }
4.这时候已经可以在页面上直接使用了，但是没有任何样式，官方预置了4套样式
    在项目中的style.css中加入 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
5.此时可以在页面中加入各种material组件了，最简单的就是从官方组件中copy代码归来放入页面即可。