<span id="ld197"><th id="ld197"><progress id="ld197"></progress></th></span>
<menuitem id="ld197"></menuitem>

    <dl id="ld197"></dl>

    <track id="ld197"><big id="ld197"><big id="ld197"></big></big></track><noframes id="ld197"><dfn id="ld197"><address id="ld197"></address></dfn>

    <output id="ld197"></output>
    <var id="ld197"><noframes id="ld197">
      <dfn id="ld197"><nobr id="ld197"><sub id="ld197"></sub></nobr></dfn>
          <b id="ld197"><form id="ld197"><delect id="ld197"></delect></form></b>

                當前位置:首頁 > 安卓源碼 > 技術博客 >

                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 '~@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 {}

                而已,F在,讓我們通過從終端提供Angular應用程序來測試模態對話框:

                $ ng serve

                服務器將從http:// localhost:4200運行。

                結論

                在此快速示例中,我們使用Angular Material和Angular 10創建了一個彈出模式對話框。


                Angular 10材質的模態彈出示例和教程 轉載http://www.hxslwl.com/appboke/46139.html

                技術博客閱讀排行

                最新文章

                久久人人97超碰人人澡,久久人人97超碰人人澡苹果,久久人人97超碰,国产福利第一视频在线播放,大陆国产国语对白视频,亚洲香蕉网久久综合影院