angular6-material dialog应用

发布时间：2020-12-17 07:03:10 所属栏目：安全来源：网络整理

导读：1. 打开弹窗的点击事件 project.component.html button mat-icon-button class="action-button" (click)="editDialog(project)" mat-iconcreate/mat-icon编辑 /button button mat-mini-fab color="warn" class="add-project" (click)="openDialog()" mat-ico

1. 打开弹窗的点击事件

project.component.html

<button mat-icon-button class="action-button" (click)="editDialog(project)">
          <mat-icon>create</mat-icon>编辑
      </button>

<button mat-mini-fab color="warn" class="add-project" (click)="openDialog()">
  <mat-icon>add</mat-icon>
</button>

project.component.ts

import { Component,OnInit } from ‘@angular/core‘;
import { MatDialog } from ‘@angular/material‘;
import { NewProjectComponent } from ‘../new-project/new-project.component‘;

@Component({
  selector: ‘app-project‘,templateUrl: ‘./project.component.html‘,styleUrls: [‘./project.component.scss‘]
})
export class ProjectComponent implements OnInit {

  projects=[
    {
      "name":‘企业协作平台‘,"desc":‘这是一个企业内部项目‘,"coverImg":‘assets/img/covers/0.jpg‘
    },{
      "name":‘员工管理平台‘,"coverImg":‘assets/img/covers/1.jpg‘
    }
  ];
  constructor(public dialog:MatDialog) { }

  ngOnInit() {
  }

  // 新建项目
  openDialog(){
    const dialogRef = this.dialog.open(NewProjectComponent,{
      width: ‘250px‘
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log(‘The dialog was closed‘,result);
    });
  }

  // 编辑项目
  editDialog(data){
    const dialogRef = this.dialog.open(NewProjectComponent,{
      width:‘250px‘,data:data
    });
    dialogRef.afterClosed().subscribe(result=>{
      console.log(‘The dialog was closed‘,result);
    })
  }

}

2. 弹窗

new-project.component.html

<h1 mat-dialog-title>新建项目</h1>
<div mat-dialog-content>
  <mat-form-field>
    <input matInput [(ngModel)]="project.name" placeholder="项目名称">
  </mat-form-field>
  <mat-form-field>
      <input matInput [(ngModel)]="project.desc" placeholder="项目描述">
    </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-raised-button (click)="onNoClick()">关闭</button>
  <button mat-raised-button  [mat-dialog-close]="project"  cdkFocusInitial  color="primary">保存</button>
</div>

new-project.component.ts

import { Component,OnInit,Inject } from ‘@angular/core‘;
import { MatDialogRef,MAT_DIALOG_DATA } from ‘@angular/material‘;

@Component({
  selector: ‘app-new-project‘,templateUrl: ‘./new-project.component.html‘,styles: []
})
export class NewProjectComponent implements OnInit {

  project:Object;
  constructor(
    public dialogRef:MatDialogRef<NewProjectComponent>,@Inject(MAT_DIALOG_DATA) public data
  ) { }

  ngOnInit() {
    this.project = this.data||{};
  }

  onNoClick(){
    this.dialogRef.close();
  }

}

3. 特别注意：new-project组件是一个服务。在project.module.ts中必须写入entryComponent中，否则会报错

import { NgModule } from ‘@angular/core‘;
import { ProjectComponent } from ‘./project/project.component‘;
import { SharedModule } from ‘../shared/shared.module‘;
import { NewProjectComponent } from ‘./new-project/new-project.component‘;

@NgModule({
  imports: [
    SharedModule
  ],declarations: [ProjectComponent,NewProjectComponent],entryComponents:[
    NewProjectComponent
  ]
})
export class ProjectModule { }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!