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-ponent.html',styleUrls: ['./new-ponent.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-ponent'@Component({selector: 'app-project-list',templateUrl: './project-ponent.html',styleUrls: ['./project-ponent.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 { }