• <label id="qwa2y"></label><kbd id="qwa2y"><option id="qwa2y"></option></kbd>
  • <u id="qwa2y"></u>
    當前位置:首頁 > 安卓源碼 > 技術博客 >

    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材質的模態彈出示例和教程 轉載http://www.hxslwl.com/appboke/46139.html

    技術博客閱讀排行

    最新文章

    久久人人97超碰人人澡,久久人人97超碰人人澡苹果,久久人人97超碰