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”文件. 样 ...
随机推荐
- 2020最新的Spring Boot 分布式锁的具体实现(内附代码)
前言 面试总是会被问到有没有用过分布式锁.redis 锁,大部分读者平时很少接触到,所以只能很无奈的回答 "没有".本文通过 Spring Boot 整合 redisson 来实现 ...
- SQLserver , MySQL的区别和各自的一些简单方法案列
SQL Server数据库和MySQL数据库有什么区别呢?今天我们来分析一下这两种数据库的不同之处以及这两种数据库的一些简单用途:SQL Server数据库和MySQL数据库有什么区别: 对于程序开发 ...
- 接口测试基础——session认证和token认证
总算是把这个过程理清楚了,现在我们的思路是:what?why?How?,实际上这些个机制产生的内部逻辑是从下至上的的:遇到问题了,想办法解决,总结归纳并取名.从解决一些小问题开始生长,不断打补丁直至完 ...
- 题解:2018级算法第四次上机 C4-商人卖鱼
题目描述: 样例: 实现解释: 需要简单分析的贪心题 知识点: 贪心,自定义排序,提前存储 题目分析: 卖鱼,鱼卖出去需要时间,鱼没被卖出去之前需要吃饲料 则有,如果卖a鱼的话b鱼会吃饲料c份,而卖b ...
- vscode F2无法使用
rope库可能存在bug 解决方法: "python.jediEnabled": false //自动补全用微软自带
- 蕴含式(包含EXISTS语句的分析)
*{ font-family: STFangSong; outline: none; } 蕴含式 一.蕴含式基础 (Ⅰ)什么是"蕴含式" 设p.q为两个命题.复合命题"如 ...
- 数据可视化实例(十一): 矩阵图(matplotlib,pandas)
矩阵图 https://datawhalechina.github.io/pms50/#/chapter9/chapter9 导入所需要的库 import numpy as np # 导入numpy库 ...
- IE9+的树状下拉菜单,支持多选
//JS核心代码function treeBox(Config){var el=eval(Config.el);var w=Config.width;var h=Config.height;var d ...
- Oracle RACDB 增加、删除 在线重做日志组
Oracle RACDB 增加.删除 在线重做日志组 select * from v$log;select * from v$logfile ; ----删除日志组:alter database dr ...
- OA系统从选型到实施完整攻略
本文结合一线IT人士分享OA实施经验,单纯地讲述OA的选型与实施,为相关经验较少的IT人士提供真正的帮助. 一.如何选择OA系统 说起OA选型,稳定性.易用性.灵活性.成本和服务少不了.但是,只了解这 ...