Angular 4 Materials
Materials 为你的项目提供许多内置模块。自动完成、日期选择器、滑块、菜单、网格和工具栏等功能可用于 Angular 4 中的材质。
要使用Materials，我们需要导入包。 Angular 2 也具有上述所有功能，但它们可以作为 @angular/core 模块的一部分使用。 Angular 4 提出了一个单独的模块 @角/Materials。 .这有助于用户导入所需的Materials。
要开始使用Materials，你需要安装两个包 - Materials和 cdk。材质组件依赖于动画模块的高级功能，因此你需要相同的动画包，即@angular/animations。该软件包已在上一章中更新。
npm install --save @angular/material @angular/cdk
现在让我们看看 package.json。 @角/Materials and @角/cdk 已安装。
{
"name": "angularstart",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/cdk": "^2.0.0-beta.8",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/material": "^2.0.0-beta.8",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.2.0",
"@angular/compiler-cli": "^4.0.0",
"@angular/language-service": "^4.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
我们已经突出显示了为使用Materials而安装的软件包。
我们现在将导入父模块中的模块 - app.module.ts 如下所示。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MdButtonModule,
MdMenuModule,
FormsModule,
MdSidenavModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在上面的文件中，我们从@angular/materials 导入了以下模块。
import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';
在imports数组中也是如此，如下所示：
imports: [ BrowserModule, BrowserAnimationsModule, MdButtonModule, MdMenuModule, FormsModule, MdSidenavModule ]
The app.component.ts 如下图：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myData: Array<any>;
constructor() {}
}
现在让我们添加Materials app.component.html .
<button md-button [mdMenuTriggerFor]="menu">Menu</button> <md-menu #menu="mdMenu"> <button md-menu-item> File </button> <button md-menu-item> Save As </button> </md-menu> <md-sidenav-container class="example-container"> <md-sidenav #sidenav class="example-sidenav"> Angular 4 </md-sidenav> <div class="example-sidenav-content"> <button type="button" md-button (click)="sidenav.open()"> Open sidenav </button> </div> </md-sidenav-container>
在上面的文件中，我们添加了 Menu 和 SideNav。
Menu
要添加菜单，
SideNav
要添加 sidenav，我们需要
点击后 opensidenav ，显示侧边栏如下图：
单击菜单后，你将获得两个项目 File and Save As 如下所示：
现在让我们使用材质添加一个日期选择器。要添加日期选择器，我们需要导入显示日期选择器所需的模块。
In app.module.ts ，我们为 datepicker 导入了如下所示的模块。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdDatepickerModule, Md输入Module, MdNativeDateModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
MdDatepickerModule,
Md输入Module,
MdNativeDateModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在这里，我们导入了模块，例如 MdDatepickerModule，Md输入Module， and MdNativeDateModule .
Now, the app.component.ts 如下图：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myData: Array<any>;
constructor() {}
}
The app.component.html 如下图：
<md-input-container> <input md输入 [mdDatepicker]="picker" placeholder="Choose a date"> <button mdSuffix [mdDatepickerToggle]="picker"></button> </md-input-container> <md-datepicker #picker></md-datepicker>
这是日期选择器在浏览器中的显示方式：
