如何在組件文件中關閉mdl對話框

嗨，我是Angular 2的新手。我使用的是angular2 mdl對話框，我想在登錄成功時關閉對話框。但我不知道如何關閉dialog.Can任何一個可以幫助我，請如何在組件文件中關閉mdl對話框

<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>

來源

2017-04-13 Nithesh S D

看來你正在使用的聲明對話框形式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(); 
}

來源

2017-04-14 08:40:33 michael

在你的父組件添加下面一行的構造器

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

來源

2017-04-13 11:22:53 Aravind

我們需要導入MdDialog？ –

和loginDialog也是undefined ..你能不能請詳細解釋一下 –

查看我更新的答案，然後一步一步按照步驟進行。 – Aravind

如何在組件文件中關閉mdl對話框

回答

相關問題