码迷,mamicode.com
首页 > 其他好文 > 详细

angular6-material dialog应用

时间:2018-12-31 11:23:40      阅读:473      评论:0      收藏:0      [点我收藏+]

标签:项目   prim   content   tco   highlight   mode   .data   script   create   

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":‘员工管理平台‘,
      "desc":‘这是一个企业内部项目‘,
      "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 { }

 

angular6-material dialog应用

标签:项目   prim   content   tco   highlight   mode   .data   script   create   

原文地址:https://www.cnblogs.com/hibiscus-ben/p/10201471.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!