Angular material 之 dialog 弹框实战

朱雀 2024-04-18 16:18 96阅读 0赞

![20190909151056434.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70][]

功能虽然简单，但是我更具官网上做出来是报错的，所以自己记录一下，希望可以帮到别人

首先，创建一个组件用于存放弹出按钮

在创建一个组件，存放弹出页面

直接上代码：

根：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 1][]

非常重要，需要将弹出页面加载进去，不然弹不出来哦

在存放弹出按钮的地方：

![2019090915160393.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 2][]

总体：

// import { Component, OnInit } from '@angular/core';
    import {MediaMatcher} from '@angular/cdk/layout';
    import {ChangeDetectorRef, Component} from '@angular/core';
    
    import {MatDialog} from '@angular/material/dialog';
    import {NewsComponent} from './news/news.component';
    
    export interface DialogData {
      animal: string;
      name: string;
    }
    
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.scss']
    })
    export class HomeComponent  {
    
    
      
      animal: string;
      name: string;
    
      mobileQuery: MediaQueryList;
    
    
      private _mobileQueryListener: () => void;
    
      constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher,
        public dialog: MatDialog //弹出框
        ) {
        this.mobileQuery = media.matchMedia('(max-width: 700px)');
        this._mobileQueryListener = () => changeDetectorRef.detectChanges();
        this.mobileQuery.addListener(this._mobileQueryListener);
      }
    
    
      openDialog(): void {  
       
        //弹出
        const dialogRef = this.dialog.open(NewsComponent, {
          width: '250px',
          data: {name: this.name, animal: this.animal}
        });
    
        dialogRef.afterClosed().subscribe(result => {
          this.animal = result;
        });
      }
    
     
    }

页面很简单，一个button就行

要才弹出的页面ts

import { Component, OnInit,Inject} from '@angular/core';
    import { DialogData } from 'src/app/components/dialog/dialog.component';
    import { MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
    
    @Component({
      selector: 'app-news',
      templateUrl: './news.component.html',
      styleUrls: ['./news.component.scss']
    })
    export class NewsComponent implements OnInit {
    
      constructor(
        public dialogRef: MatDialogRef<NewsComponent>,
        @Inject(MAT_DIALOG_DATA) public data: DialogData){
        }
    
      ngOnInit() {
      }
    
    
    }

弹出页面自己写

[20190909151056434.png]: https://img-blog.csdnimg.cn/20190909151056434.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/065e7137c0294e9eb99222d221e4078b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d8459ddb5af841e085412df13d9fea04.png
[2019090915160393.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/82f8991cd9bc4bd1b37c04c8d45a0813.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0e90d8b239bc48c6b17536248df2a736.png