Angular7:Materials
Materials为你的项目提供了许多内置模块。自动完成、日期选择器、滑块、菜单、网格和工具栏等功能可用于Angular 7中的材质。
要使用Materials,我们需要导入包。Angular 2也具有上述所有特性,它们是@angular/core模块的一部分。从Angular4开始,Materials模块与一个单独的模块@angular/materials一起提供。这有助于用户只导入项目中所需的功能。
要开始使用Materials,您需要安装两个软件包:Materials和cdk。Materials组件依赖动画模块获得高级特征。因此,你需要同时导入@angular/animations包,我们已经在前面章节中为虚拟滚动和拖放模块安装了@angular/cdk软件包。
以下是向项目添加materials的命令
npm install --save @angular/material
现在让我们看看package.json,@angular/material和@angular/cdk已安装。
{ "name": "angular7-app", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~7.2.0", "@angular/cdk": "^7.3.4", "@angular/common": "~7.2.0", "@angular/compiler": "~7.2.0", "@angular/core": "~7.2.0", "@angular/forms": "~7.2.0", "@angular/material": "^7.3.4", "@angular/platform-browser": "~7.2.0", "@angular/platform-browser-dynamic": "~7.2.0", "@angular/router": "~7.2.0", "core-js": "^2.5.4", "rxjs": "~6.3.3", "tslib": "^1.9.0", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.13.0", "@angular/cli": "~7.3.2", "@angular/compiler-cli": "~7.2.0", "@angular/language-service": "~7.2.0", "@types/node": "~8.9.4", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.1.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.2.2" } }
我们现在将导入父模块app.module.ts中的模块,如下所示。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule , RoutingComponent} from './app-routing.module'; import { AppComponent } from './app.component'; import { NewCmpComponent } from './new-cmp/new-cmp.component'; import { ChangeTextDirective } from './change-text.directive'; import { SqrtPipe } from './app.sqrt'; import { MyserviceService } from './myservice.service'; import { HttpClientModule } from '@angular/common/http'; import { ScrollDispatchModule } from '@angular/cdk/scrolling'; import { DragDropModule } from '@angular/cdk/drag-drop'; import { ReactiveFormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material'; @NgModule({ declarations: [ SqrtPipe, AppComponent, NewCmpComponent, ChangeTextDirective, RoutingComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, ScrollDispatchModule, DragDropModule, ReactiveFormsModule, BrowserAnimationsModule, MatButtonModule, MatMenuModule, MatSidenavModule ], providers: [MyserviceService], bootstrap: [AppComponent] }) export class AppModule { }
在上述文件中,我们从@angular/materials导入了以下模块
import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';
导入数组中也使用了相同的方法,如下所示。
imports: [ BrowserModule, AppRoutingModule, HttpClientModule, ScrollDispatchModule, DragDropModule, ReactiveFormsModule, BrowserAnimationsModule, MatButtonModule, MatMenuModule, MatSidenavModule ], app.component.ts如下所示。 import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor() {} }
现在让我们在styles.css中添加material-css支持。
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
现在让我们在app.component.html内部添加materials
菜单
要添加菜单,请使用<mat-menu></mat-menu>。文件和另存为项目被添加到mat-menu下的按钮。添加了一个主按钮菜单。通过使用[matMenuTriggerFor]=“menu”,并使用<mat-menu>中带有#的菜单,可以在<mat-menu>中给出相同的参考。
app.component.html
<button mat-button [matMenuTriggerFor] = "menu">Menu</button> <mat-menu #menu = "matMenu"> <button mat-menu-item> File </button> <button mat-menu-item> Save As </button> </mat-menu>
浏览器中将显示以下图像。
点击菜单将显示其中的项目。
侧边导航
要添加侧边导航,我们需要<mat-sidenav-container></mat-sidenav-container>。<mat-sidenav></mat-sidenav>作为子导航添加到容器中。增加了另一个div,通过使用 (click)="sidenav.open()"来触发侧边导航。
app.component.html
<mat-sidenav-container class="example-container" fullscreen> <mat-sidenav #sidenav class = "example-sidenav"> Angular 7 </mat-sidenav> <div class = "example-sidenav-content"> <button type = "button" mat-button (click) = "sidenav.open()"> Open sidenav </button> </div> </mat-sidenav-container>
app.component.css
.example-container { width: 500px; height: 300px; border: 1px solid rgba(0, 0, 0, 0.5); } .example-sidenav { padding: 20px; width: 150px; font-size: 20px; border: 1px solid rgba(0, 0, 0, 0.5); background-color: #ccc; color:white; }
以下是浏览器的输出。
如果我们单击打开侧面导航,下面的面板将在左侧打开。
日期选择器
现在让我们使用material添加一个日期选择器。要添加日期选择器,我们需要导入显示日期选择器所需的模块。
在app.module.ts中,我们为日期选择器导入了如下所示的模块
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule , RoutingComponent} from './app-routing.module'; import { AppComponent } from './app.component'; import { NewCmpComponent } from './new-cmp/new-cmp.component'; import { ChangeTextDirective } from './change-text.directive'; import { SqrtPipe } from './app.sqrt'; import { MyserviceService } from './myservice.service'; import { HttpClientModule } from '@angular/common/http'; import { ScrollDispatchModule } from '@angular/cdk/scrolling'; import { DragDropModule } from '@angular/cdk/drag-drop'; import { ReactiveFormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatDatepickerModule, MatInputModule, MatNativeDateModule } from '@angular/material'; @NgModule({ declarations: [ SqrtPipe, AppComponent, NewCmpComponent, ChangeTextDirective, RoutingComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, ScrollDispatchModule, DragDropModule, ReactiveFormsModule, BrowserAnimationsModule, MatDatepickerModule, MatInputModule, MatNativeDateModule ], providers: [MyserviceService], bootstrap: [AppComponent] }) export class AppModule { }
这里,我们导入了一些模块,如MatDatepickerModule、MatInputModule和MatNativeDateModule。
现在,app.component.ts如下所示.
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', s tyleUrls: ['./app.component.css'] }) export class AppComponent { constructor() {} }
app.component.html如下所示.
<mat-form-field> <input matInput [matDatepicker] = "picker" placeholder = "Choose a date"> <mat-datepicker-toggle matSuffix [for] = "picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field>
在style.css中添加了全局css.
/* You can add global styles to this file, and also import other style files */ @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; body { font-family: Roboto, Arial, sans-serif; margin: 10; } .basic-container { padding: 30px; } .version-info { font-size: 8pt; float: right; }
日期选择器显示在浏览器中,如下所示: