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<NewProjectComponent>,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里面没有引入MdDialogModuleimport{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 { }