当前位置:首页 > 安卓源码 > 技术博客 >

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

时间:2020-08-02 17:21 来源:互联网 作者:源码搜藏 浏览: 收藏 挑错 推荐 打印

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

现在,包括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 '[email protected]/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材质的模态弹出示例和教程 转载https://www.codesocang.com/appboke/46139.html

技术博客阅读排行

最新文章