Angular Material Dialog 组件

dialog

对话框很特殊，需要在模块中的entryComponents中引用
传递数据：

const dialogRef = dialog.open(YourDialog,{data:'your data'});

接收数据：

constructor(@Inject(MD_DIALOG_DATA) public data:ang){};

举个栗子
new-project-component.ts文件：

import { Component, OnInit,Inject } from '@angular/core';
import { MD_DIALOG_DATA,MdDialogRef,OverlayContainer } from '@angular/material';

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

  constructor(@Inject(MD_DIALOG_DATA) private data,private dialogRef:MdDialogRef,private oc:OverlayContainer) { }

  ngOnInit() {
    console.log(JSON.stringify(this.data));
    this.oc.themeClass = this.data.dark ? 'myapp-dark-theme' : null;
  }

  onClick() {
    this.dialogRef.close('I received you message');
  }
}

project-list-compoent.ts文件：

import { Component, OnInit } from '@angular/core';
import { MdDialog } from '@angular/material';//文件引用了，但是模块在shared.module.ts里面还是要注入，这里之前遇到过bug就是在shared.module.ts里面没有引入MdDialogModule
import{NewProjectComponent} from '../new-project/new-project.component'
@Component({
  selector: 'app-project-list',
  templateUrl: './project-list.component.html',
  styleUrls: ['./project-list.component.css']
})
export class ProjectListComponent implements OnInit {

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

  ngOnInit() {
  }

  openNewProjectDialog() {
   const dialogRef = this.dialog.open(NewProjectComponent, { data: {dark:true} });
   dialogRef.afterClosed().subscribe(result => { 
     console.log(result);
   });
  }

}

shared.module.ts文件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MdToolbarModule,
  MdIconModule,
  MdButtonModule,
  MdCardModule,
  MdInputModule,
  MdListModule,
  MdSlideToggleModule,
  MdDialogModule,
} from "@angular/material";
@NgModule({
  imports: [
    CommonModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule,
    MdListModule,
    MdSlideToggleModule,

    MdDialogModule,
  ],
  exports: [
    CommonModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule,
    MdListModule,
    MdSlideToggleModule,
    MdDialogModule,
  ],
  declarations: []
})
export class SharedModule { }