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

【问题标题】：How to close mdl dialog in component file如何在组件文件中关闭 mdl 对话框
【发布时间】：2017-09-09 11:39:42
【问题描述】：

您好，我是 Angular 2 的新手。我正在使用 angular2 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>

【问题讨论】：

标签： angular angular2-mdl

【解决方案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();
}

【讨论】：

【解决方案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

【讨论】：

我们需要导入 MdDialog ??
和 loginDialog 也未定义..你能解释一下吗