如何关闭组件文件中的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

在您的父组件中，将以下行添加到构造函数

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

Answer 2

看来您使用的是声明式对话框形式http://mseemann.io/angular2-mdl/dialogs-declarative. The sources for this demo can be found here: 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();
}

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

How to close mdl dialog in component file

angular2-mdl

angular