Angular Material，Angular CDK试用（Angular 7）

本文代码已上传到github： 

 https://github.com/minicherry/taoBao 

 1.Angular Material，Angular CDK基础配置引入 

此部分参考： 

juejin.im/post/5a7272…

安装配置从官网学习： 

material.angular.io/guide/getti…

下载安装包： 

npm install --save @angular/material @angular/cdk @angular/animations

安装： 

npm install --save angular/material2-builds angular/cdk-builds angular/animations-builds

引入Angular Material到项目中： 

新建material.module.ts用于统一导入导出各种组件 

ng g module material

material.module.ts： 

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import {MatInputModule} from '@angular/material'; 
 @NgModule({ 
 declarations: [], 
 imports: [
    CommonModule,
  ], 
 exports: [
    MatInputModule
  ]
}) 
export class MaterialModule { } 
复制代码

 app.module.ts: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MaterialModule } from '../material/material.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } 复制代码

 app.component.html 

<mat-form-field class="example-full-width">
  <textarea matInput placeholder="Leave a comment"></textarea>
</mat-form-field> 复制代码

便可显示出组件。 

引入主题：

 如果使用的是Angular CLI，则在styles.css中引入如下样式： 

@import "[email protected]/material/prebuilt-themes/indigo-pink.css"
复制代码

关于主题参考链接如下： 

material.angular.io/guide/themi…

显示结果如下图： 

手势操作： 

安装hammerjs： 

npm install --save hammerjs 

在工程的入口引入(e.g.src/main.ts)：

import 'hammerjs'; 
复制代码

添加Material Icons： 

安装Material Icons： 

npm install material-design-icons 

在material.module.ts中引入MatIconModule： 

import {MatInputModule, MatIconModule } from '@angular/material';

@NgModule({
  declarations: [],
  imports: [
    MatIconModule
  ],
  exports: [
    MatIconModule
  ]

})
export class MaterialModule { }
复制代码

app.component.html中使用即可： 

<mat-icon>menu<mat-icon> 复制代码

显示结果如下图：

参考链接： 

google.github.io/material-de…

2.Angular CDK试用拖动 

material.module.ts引入： 

import {DragDropModule} from '@angular/cdk/drag-drop';

@NgModule({
  declarations: [],
  imports: [
    ...
  ],
  exports: [
    ...
    DragDropModule
  ]
})
export class MaterialModule { }
app.component.html使用：
<div class="example-box" cdkDragLockAxis="y" cdkDrag>
  I can only be dragged up/down
</div>
<div class="example-box" cdkDragLockAxis="x" cdkDrag>
  I can only be dragged left/right
</div> 复制代码

显示结果:

样式可调整修改。 

参考如下： 

material.angular.io/cdk/drag-dr…

转载于:https://juejin.im/post/5c467369f265da61682baa50