如何在组件文件中关闭mdl对话框

Question

嗨，我是Angular 2的新手。我使用的是angular2 mdl对话框，我想在登录成功时关闭对话框。但我不知道如何关闭dialog.Can任何一个可以帮助我，请

<mdl-dialog #loginDialog [mdl-dialog-config]="{ 
      clickOutsideToClose: true, 
      isModal:true, 
      openFrom: loginButton, 
      enterTransitionDuration: 400, 
      leaveTransitionDuration: 400}"> 
    <h3 class="mdl-dialog__title">Login</h3> 
    <div class="mdl-dialog__content"> 
    <form name='loginForm' #loginForm="ngForm"> 
     <md-input-container> 
      <md-icon class="inputIcon">perm_identity</md-icon> 
      <input type="text" mdInput name="Email" [(ngModel)]="userEmail" placeholder="Email" #Email="ngModel" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" required> 
     </md-input-container> 
     <div [hidden]="Email.valid || Email.pristine" class="error"> 
        Email is invalid! 
       </div> 
     <md-input-container> 
      <md-icon class="inputIcon">lock</md-icon> 
      <input type="password" mdInput name="Password" [(ngModel)]="password" placeholder="Password" required> 
     </md-input-container> 
     <button class="btn loginBlue" [disabled]="!loginForm.form.valid" (click)="loginEmail(); false">Login</button> 
     <p style="text-align: center;font-size: 14px;font-family: 'Open Sans';color: #909090;margin-top: 20px;margin-bottom: 15px;">or</p> 
     <button class="loginRed" (click)="loginGoogle(); false"><img src="/images/google_icon.png" class="google">Login using google</button> 
    </form> 
    </div> 
</mdl-dialog> 

Answer 1

看来你正在使用的声明对话框形式http://mseemann.io/angular2-mdl/dialogs-declarative。这个演示的来源可以在这里找到：https://github.com/mseemann/angular2-mdl/blob/master/src/demo-app/app/dialog-declarative/dialog-declarative.component.ts

在你的代码必须抓住你的TS文件为您LoginDialog里从视图模板参考（#loginDialog）（组件文件）：

@ViewChild('loginDialog') loginDialog: MdlDialogComponent; 

您现在可以登录Google方法：

public loginDialog() { 
    // do the login and if you are done: 
    this.loginDialog.close(); 
} 

Answer 2

在你的父组件添加下面一行的构造器

constructor(public dialog: MdDialog) {} 

论模态对话框呼叫登录的点击父组件的关闭方法如下

<button (click)="loginDialog.close()"> Login </button> 

更新：

的代码来打开二考勤

openDialog() { 
    let dialogRef = this.dialog.open(ParentDialog); 
    dialogRef.afterClosed().subscribe(result => { 
     //your action 
    }); 
    } 

的代码以关闭对话框

<button class="btn loginBlue" 
    (click)="dialogRef.close()">Login</button> 

LIVE DEMO