import { Component , OnInit } from '@angular/core' ; import { MatDialog , MatDialogRef , MatChipInputEvent } from '@angular/material' ; import { AddPostConfirmDialogComponent } from '../add-post-confirm-dialog/add-post-confirm-dialog.component' ; import { ENTER , COMMA } from '@angular/cdk/keycodes' ; @ Component ( { selector : 'app-add-post-dialog' , templateUrl : './add-post-dialog.component.html' , styleUrls : [ './add-post-dialog.component.css' ] } ) export class AddPostDialogComponent implements OnInit { title : string ; tags = [ 'JavaScript' , 'Material Design' , 'Angular Material' ] ; separatorKeysCodes = [ ENTER , COMMA ] ; constructor ( private dialogRef , private dialog ) { } ngOnInit ( ) { } doPost ( ) { const confirmDialogRef = this . dialog . open ( AddPostConfirmDialogComponent , { data : { title : this . title } } ) ; confirmDialogRef . componentInstance . doConfirm . subscribe ( ( ) => { console . log ( '開啟的dialog按下確認按鈕了' ) ; } ) ; } move ( ) { this . dialogRef . updatePosition ( { top : '0' , left : '0' } ) ; } removeTag ( tagName ) { this . tags = this . tags . filter ( tag => tag !== tagName ) ; } addTag ( $event ) { if ( ( $event . value || '' ) . trim ( ) ) { const value = $event . value . trim ( ) ; if ( this . tags . indexOf ( value ) === - 1 ) { this . tags . push ( value ) ; } } $event . input . value = '' ; } }