日志

Angular 10材质的模态弹出示例和教程

 来源    2020-08-02    0  
在本教程中,我们将通过示例使用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创建了一个弹出模式对话框。

相关文章
angularjs – 有没有办法在单个控制器中使用$uibModal和$uibModalInstance来实现使用angular with typescript的模态弹出窗口?
问答由于我是角色与打字稿的新手,我在实现角度模态弹出时面临一个问题.问题是我有一个下拉列表,我必须打开一个模态弹出窗口,而模态弹出窗口将有两个按钮"是"或"否".为 ...
Angular 2模态弹出错误“表达式在检查后发生了变化”
问答Youtube video demonstrating the problem Github repository for the demo app 我有一个非常简单的应用程序,包含应用程序组件,子组 ...
2
angularjs – 从0.10升级到版本0.11时,Angular UI引导程序日期选择器弹出窗口不起作用
问答升级到版本0.11后单击时,不会弹出angular-ui-bootstrap日期选取器. 我已经尝试了设置的recommended work around is-open="dt.open& ...
打字稿 – 带有动态内容的angular 6模态弹出窗口
问答在我的项目中,我有一个大约50个用户的用户列表.通过单击每个用户名,相应用户的信息应显示在模式弹出窗口中. 我不知道如何在我的代码中的弹出窗口中加载Id的内容. 我有2个组件.用户列表和用户详细信息. ...
1
javascript – 通过点击它来关闭模态弹出窗口
问答我正在使用本教程添加模态屏幕: http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/ 一切都很好,除了关 ...
1
javascript – 我想在离开页面之前显示模态弹出窗口
问答<a href="https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h&qu ...
javascript – 谷歌地图不会出现在模态弹出窗口中
问答我想在模态弹出窗口中显示谷歌地图,但它似乎没有出现.需要帮忙. 这是HTML – <div id="map-canvas" style="width: 600px; ...
2
javascript – 与用户设置上的最大化,最小化,关闭,调整大小和可拖动等用户操作交互的模态弹出窗口
问答我需要与用户操作交互的模态弹出窗口,如下面的snap.但是这个模态弹出窗口应该是纯java脚本.严禁使用JQuery或JQuery插件. 我期待着您的回音. 提前致谢.::在这里,我分享一些基本上在J ...
1
javascript – 范围绑定在模态弹出angularjs中不起作用
问答我正在使用angular来将数据绑定到我的UI,这非常有效.但是当按钮单击时调用模态弹出窗口时,模态中的绑定不起作用. <div class="modal-dialog"&g ...
2
google-chrome – 如何从上下文菜单中显示模态弹出窗口?
问答如何从上下文菜单中显示模态对话框? 我可以在上下文菜单中显示一个新窗口,该窗口在自己的选项卡中打开: var menuItem = { "id": "rateMenu&q ...
1
asp.net – 如何在回发后阻止关闭模态弹出窗口(ModalPopupExtender)?
问答我正在使用Microsoft AjaxControlToolkit进行模态弹出窗口. 在模态弹出窗口中,当发生回发时,窗口正在关闭.如何防止模态弹出窗口的关闭动作?::将控件放在更新面板中.请参阅我的 ...
2
javascript – Window.open作为模态弹出窗口?
问答我想打开window.open作为模态弹出窗口. var features = 'resizable= yes; status= no; scroll= no; help= no; center= y ...
1
asp.net-mvc – 在父视图顶部的Jquery模态弹出窗口中渲染局部视图
问答我在父视图的顶部渲染局部视图如下按钮单击: $('.AddUser').on('click', function () { $("#AddUserForm").dialog({ a ...
2
javascript – 即使在angularjs中禁用了按钮,模态弹出窗口也会打开
问答我有一个Bootstrap模式弹出窗体,按照AngularJS中的按钮点击打开,我想知道即使按钮被禁用它仍然显示如何. 请看下面的按钮代码: <a class="btn btn-sm ...
2
Bootjrap模态弹出窗口使用angularjs无法打开和关闭
问答您好我想使用angularjs controller.js代码打开和关闭bootstrap模型弹出窗口. 我的控制器代码 app.controller('RoleViewCtrlq', ['$scop ...
1
基于JavaScript的模态/弹出服务如KissInsights和Hello Bar如何工作?
问答我正在开发一个模式/弹出系统,供我的用户嵌入他们的网站,与KissInsights和Hello Bar(例如here和here)一样. 构建这样的服务的最佳实践是什么?看起来用户嵌入了一些JS,但该代 ...
2
jquery – 创建一个简单的模态弹出窗口
问答我有一个非常简单的要求.我有两个div.带有Link和Div2的Div1包含一些文本. 点击Div1中的链接,我想将Div2显示为一个带有灰色背景和关闭按钮的简单模态弹出窗口. 现在可以在不使用任何外 ...
1
html – AJAX Control Toolkit自动完成出现在模态弹出窗口后面
问答我在AJAX Control Toolkit中遇到了AutoCompleteExtender的问题,我似乎无法深入到底.该控件位于一个asp:Panel中,该工具包链接到ModalPopupExten ...
2
javascript – 在Angular 2中单击模式弹出窗口上的“重试”按钮时再次进行失败的Web API调用,如果调用成功,则继续执行“重试”
问答在我的angular 2应用程序中,我正在从组件到服务以及从服务到后端Web API进行调用.从Web API获得的响应从服务发送回组件,我订阅组件内的响应.对于错误处理,我使用的是在整个应用程序中使 ...
1
twitter-bootstrap – Bootstrap模态弹出,但有一个“有色”的页面,不能互动
问答我正在使用引导来设置模态弹出窗口.当单击按钮时,将打开模态对话框,但整个页面略有"有色",我无法与模态(页面基本上冻结)进行交互.你知道为什么会这样吗?这是代码: 按钮: < ...
2