在本教程中,我们将通过示例使用Angular 10材质构建模式弹出窗口。
在这里,我们将研究创建Angular 10项目,安装和设置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

现在,包括hammerjsangular.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.tsBrowserAnimationsModule

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文件,并导入MatDialogMatDialogRefMAT_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材质的模态弹出示例和教程的更多相关文章

  1. Bootstrap模态弹出框

    前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...

  2. 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      [ ...

  3. iOS模态弹出半透明视图控制器

    项目中需要实现点击按钮出现的视图全屏覆盖,呈半透明状态可以看到下面的视图? 解决方案: 绕了很多弯路原来可以使用模态弹出一个视图控制器 在iOS8之后只需要设置一个最新的属性 SecondViewCo ...

  4. Bootstrap模态弹出窗

    Bootstrap模态弹出窗有三种方式: 1.href触发模态弹出窗元素: <a class="btn btn-primary" data-toggle="moda ...

  5. iOS:模态弹出窗控制器UIPopoverPresentationController

    模态弹出窗控制器:UIPopoverPresentationController 实质:就是将内容控制器包装成PopoverPresentationController的形式,然后再模态出来,必须指定 ...

  6. bootstrap学习--模态弹出框modals轮子

    1.点击按钮型 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> ...

  7. UIPresentationController - iOS自定义模态弹出框

    参考: https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/Definin ...

  8. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析

    模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...

  9. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框

    模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...

随机推荐

  1. Redis哨兵集群创建脚本--v1

    基础环境 操作系统版本  CentOS Linux release 7.6.1810 (Core) Docker 版本  19.03.11, build 42e35e61f3 Redis  版本  3 ...

  2. vs遇到的字符串问题

    原以为自己的字符串已经理解不错了, 今天又被vs搞了. 情景就不说了, 直接说结果: 有两种情况 1 当文件是存储为gbk或者utf-8的时候, 中文字符存储永远是gbk的值. ‘按’字的gbk编码 ...

  3. Java工具类之:包装类

    Java工具类--包装类 我们都知道,JDK 其实给我们提供了很多很多 Java 开发者已经写好的现成的类,他们其实都可以理解成工具类,比如我们常见的集合类,日期相关的类,数学相关的类等等,有了这些工 ...

  4. [设计模式]工厂方法模式(Factory Method)

    模式目的 定义一个用于创建对象的接口,让其子类来决定实例化哪个类. 工厂方法模式将类的实例化延迟到了子类中进行. 模式结构 组成部分 产品(Product) - 定义了产品功能的接口 具体产品(Con ...

  5. .NET程序运行原理及基本概念详解

    一.引言 我们知道在Java中有虚拟机,代码运行时虚拟机把Java语言编译成与机器无关的字节码,然后再把字节码编译成机器指令执行,那么在.NET中程序是如何运行的呢?其实运行原理是一样的,.NET中的 ...

  6. Android/iOS内嵌Unity开发示例

    Unity 与 Android/iOS 交叉开发主要有两种方式,以 Android 为例,一是 Android 生成 jar 或者 aar 包,导入到 unity3d plugin/bin/ 目录下: ...

  7. Mybatis插件扩展以及与Spring整合原理

    @ 目录 前言 正文 插件扩展 1. Interceptor核心实现原理 2. Mybatis的拦截增强 Mybatis与Spring整合原理 1. SqlSessionFactory的创建 2. 扫 ...

  8. MCU 51-2 LED and Digital tube Test

    点亮LED实验: #include <reg52.h> sbit LED1 = P1^; sbit LED2 = P1^; sbit LED8 = P1^; void main() { L ...

  9. softmax、cross entropy和softmax loss学习笔记

    之前做手写数字识别时,接触到softmax网络,知道其是全连接层,但没有搞清楚它的实现方式,今天学习Alexnet网络,又接触到了softmax,果断仔细研究研究,有了softmax,损失函数自然不可 ...

  10. INSERT插入WHERE判断是否插入(MySQL)

    一.INSERT INTO IF EXISTS 具体语法:INSERT INTO table(field1, field2, fieldn) SELECT 'field1', 'field2', 'f ...