< MatSnackBar> ,Angular Directive,用于显示在移动设备上显示的通知栏,作为对话框/弹出窗口的替代选项.
在本章中,我们将展示使用Angular Material显示小吃店所需的配置.
以下是修改后的模块描述符的内容 app.module.ts .
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {MatButtonModule,MatSnackBarModule} from '@angular/material' import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatButtonModule,MatSnackBarModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
以下是修改过的HTML主机文件的内容 app.component.html .
<button mat-button (click)="openSnackBar('Party', 'act')">Show snack-bar</button>
以下是修改过的ts文件的内容 app.component.ts .
import {Component, Injectable} from '@angular/core'; import { MatSnackBar } from "@angular/material"; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'] }) export class AppComponent { constructor(public snackBar: MatSnackBar) {} openSnackBar(message: string, action: string) { this.snackBar.open(message, action, { duration: 2000, }); } }
验证结果.
在这里,我们使用mat-button创建了一个按钮,点击它我们会显示小吃店.