Angular 10材质的模态弹出示例和教程
在本教程中,我们将通过示例使用Angular 10材质构建模式弹出窗口。
Angular Material提供了现代UI组件,用于基于可在Web源码,移动和桌面上使用的材料设计规范来构建用户界面。
步骤1:建立Angular 10专案
打开一个新的命令行界面并运行以下命令:
$ ng new angular-modal-example
步骤2:安装和设置Angular 10材质
导航到项目的文件夹内,hammerjs
并按如下所示进行安装:
$ cd angular-modal-example
$ npm install --save hammerjs
Hammer.js添加了对触摸支持的支持。
接下来,使用以下命令安装Angular材质和Angular动画:
$ npm install --save @angular/material @angular/animations @angular/cdk
现在,包括hammerjs
在angular.json文件中。
步骤3:创建自定义材料模块文件
导航到src / app文件夹,创建一个名为material.module.ts的模块文件:
$ cd src/app
$ touch material.module.ts
打开src / app / material.module.ts文件并如下更新:
import { NgModule } from '@angular/core'; import { MatDialogModule, MatFormFieldModule, MatButtonModule, MatInputModule }
from '@angular/material';
import { FormsModule } from '@angular/forms'; @NgModule({
exports: [FormsModule, MatDialogModule, MatFormFieldModule, MatButtonModule, MatInputModule]
})
export class MaterialModule {}
步骤4:导入主题和材质图标
Angular Material提供了许多预先构建的主题。打开styles.css文件并添加:
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
接下来打开index.html文件并添加:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
接下来,打开src / app / app.module.ts文件并导入material.module.ts和BrowserAnimationsModule
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module'; import { AppComponent } from './app.component'; @NgModule({
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, MaterialModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
步骤5:实施Angular 10材质模态对话框
现在,打开SRC / app.component.ts文件,并导入MatDialog
,MatDialogRef
,MAT_DIALOG_DATA
:
import { Component, Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material'; interface DialogData {
email: string;
} @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
接下来,通过从项目网站源码的根目录运行以下命令来创建Angular组件:
ng generate component modal --module app --spec=false
打开src / app / modal / modal.component.ts文件并如下更新:
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA} from '@angular/material'; interface DialogData {
email: string;
} @Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit { constructor(
public dialogRef: MatDialogRef<modalcomponent>,
@Inject(MAT_DIALOG_DATA) public data: DialogData) {} onNoClick(): void {
this.dialogRef.close();
} ngOnInit() {
}
}
打开src / app / modal / modal.component.html文件并添加以下标记:
<h1 mat-dialog-title>Want to receive our emails?</h1>
<div mat-dialog-content>
<p>What's your email?</p>
<mat-form-field>
<input matInput [(ngModel)]="data.email">
</mat-form-field>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">No</button>
<button mat-button [mat-dialog-close]="data.email" cdkFocusInitial>Yes</button>
</div>
接下来,打开src / app / app.component.ts文件并如下更新:
import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { ModalComponent } from './modal/modal.component'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
email: string; constructor(public dialog: MatDialog) {} openDialog(): void {
const dialogRef = this.dialog.open(ModalComponent, {
width: '300px',
data: {}
}); dialogRef.afterClosed().subscribe(result => {
this.email = result;
});
}
}
首先,我们将模态组件导入src / app / app.component.ts文件。接下来,我们定义了openDialog()
打开ModalComponent
当用户关闭模式组件时,该App
组件接收在中输入的电子邮件的值ModalComponent
。
接下来,打开src / app / app.component.html文件和以下标记:
<div> <button mat-raised-button (click)="openDialog()">Open modal</button> <br />
<div *ngIf="email">
You signed up with: <p></p>
</div>
</div>
打开src / app / app.module.ts文件,并将模态组件添加entryComponents
到模块数组中,如下所示:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module'; import { AppComponent } from './app.component';
import { ModalComponent } from './modal/modal.component'; @NgModule({
declarations: [AppComponent, ModalComponent],
imports: [BrowserModule, BrowserAnimationsModule, MaterialModule],
providers: [],
bootstrap: [AppComponent],
entryComponents: [ModalComponent]
})
export class AppModule {}
而已。现在,让我们通过从终端提供Angular应用程序来测试模态对话框:
$ ng serve
服务器将从http:// localhost:4200运行。
结论
在此快速示例中,我们使用Angular Material和Angular 10创建了一个弹出模式对话框。
Angular 10材质的模态弹出示例和教程的更多相关文章
- Bootstrap模态弹出框
前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
- bootstrap-data-target触发模态弹出窗元素的data使用 data-toggle与data-target的作用 深入ASP.NET MVC之九:Ajax支持 Asp.Net MVC4系列--进阶篇之AJAX
bootstrap-data-target触发模态弹出窗元素的data使用 时间:2017-05-27 14:22:34 阅读:4479 评论:0 收藏:0 [ ...
- iOS模态弹出半透明视图控制器
项目中需要实现点击按钮出现的视图全屏覆盖,呈半透明状态可以看到下面的视图? 解决方案: 绕了很多弯路原来可以使用模态弹出一个视图控制器 在iOS8之后只需要设置一个最新的属性 SecondViewCo ...
- Bootstrap模态弹出窗
Bootstrap模态弹出窗有三种方式: 1.href触发模态弹出窗元素: <a class="btn btn-primary" data-toggle="moda ...
- iOS:模态弹出窗控制器UIPopoverPresentationController
模态弹出窗控制器:UIPopoverPresentationController 实质:就是将内容控制器包装成PopoverPresentationController的形式,然后再模态出来,必须指定 ...
- bootstrap学习--模态弹出框modals轮子
1.点击按钮型 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> ...
- UIPresentationController - iOS自定义模态弹出框
参考: https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/Definin ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析
模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框
模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...
随机推荐
- Redis哨兵集群创建脚本--v1
基础环境 操作系统版本 CentOS Linux release 7.6.1810 (Core) Docker 版本 19.03.11, build 42e35e61f3 Redis 版本 3 ...
- vs遇到的字符串问题
原以为自己的字符串已经理解不错了, 今天又被vs搞了. 情景就不说了, 直接说结果: 有两种情况 1 当文件是存储为gbk或者utf-8的时候, 中文字符存储永远是gbk的值. ‘按’字的gbk编码 ...
- Java工具类之:包装类
Java工具类--包装类 我们都知道,JDK 其实给我们提供了很多很多 Java 开发者已经写好的现成的类,他们其实都可以理解成工具类,比如我们常见的集合类,日期相关的类,数学相关的类等等,有了这些工 ...
- [设计模式]工厂方法模式(Factory Method)
模式目的 定义一个用于创建对象的接口,让其子类来决定实例化哪个类. 工厂方法模式将类的实例化延迟到了子类中进行. 模式结构 组成部分 产品(Product) - 定义了产品功能的接口 具体产品(Con ...
- .NET程序运行原理及基本概念详解
一.引言 我们知道在Java中有虚拟机,代码运行时虚拟机把Java语言编译成与机器无关的字节码,然后再把字节码编译成机器指令执行,那么在.NET中程序是如何运行的呢?其实运行原理是一样的,.NET中的 ...
- Android/iOS内嵌Unity开发示例
Unity 与 Android/iOS 交叉开发主要有两种方式,以 Android 为例,一是 Android 生成 jar 或者 aar 包,导入到 unity3d plugin/bin/ 目录下: ...
- Mybatis插件扩展以及与Spring整合原理
@ 目录 前言 正文 插件扩展 1. Interceptor核心实现原理 2. Mybatis的拦截增强 Mybatis与Spring整合原理 1. SqlSessionFactory的创建 2. 扫 ...
- MCU 51-2 LED and Digital tube Test
点亮LED实验: #include <reg52.h> sbit LED1 = P1^; sbit LED2 = P1^; sbit LED8 = P1^; void main() { L ...
- softmax、cross entropy和softmax loss学习笔记
之前做手写数字识别时,接触到softmax网络,知道其是全连接层,但没有搞清楚它的实现方式,今天学习Alexnet网络,又接触到了softmax,果断仔细研究研究,有了softmax,损失函数自然不可 ...
- INSERT插入WHERE判断是否插入(MySQL)
一.INSERT INTO IF EXISTS 具体语法:INSERT INTO table(field1, field2, fieldn) SELECT 'field1', 'field2', 'f ...