Angular 2 模态对话框 - ng2-modal-dialog

Angular 2 模态对话框 - ng2-modal-dialog
插件名称 ng2-modal-dialog
发布时间 2020年8月4日
插件作者 DanielNetzer

Angular2的完全通用,可定制且流畅的模式窗口。此模块的唯一依赖关系是angular本身,可在运行时生成模态组件本身时与任何样式的预处理器一起使用。

安装:

npm install –save ng2-modal-dialog

用法

将模块导入app.module.ts文件和模态组件。

import { ModalModule } from 'ng2-modal-dialog/modal.module';
import { LoginModalComponent } from './login-modal/login-modal.component';
...
declarations: [
    ...
    LoginModalComponent
  ],
imports: [
   ...
    ModalModule
  ],

在中添加占位符 app.componenet.html

<h1>
  {{title}}
</h1>
<a href="javascript:void(0);" (click)="openLoginModal(passedParameter = {
    username: 'user',
    password: 'pass'
  })">Login</a>
  <!-- 所有将被打开的情态的占位符 -->
<modal-placeholder></modal-placeholder>

在模态的父组件中,您将需要导入以下内容。

import { ModalService } from 'ng2-modal-dialog/modal.module';
import { LoginModalComponent } from './login-modal/login-modal.component';
// 应用程序src中的AppModule
import { AppModule } from './app.module';
...

// 在父组件构造函数中实例化一个新的ModalService
constructor(private modalService: ModalService) { }

// 单击function打开模态
  openLoginModal(userCreds): void {
  	// 服务回调函数,用于创建带有作为参数传递的对象的模态
    this.modalService.create(AppModule, LoginModalComponent, {userCreds});
  }

login-modal.componenet.ts

import { Component } from '@angular/core';
import { Modal } from 'ng2-modal-dialog/modal.module';

@Component({
  selector: 'app-login-modal',
  templateUrl: './login-modal.component.html',
  styleUrls: ['./login-modal.component.css']
})
// 模态导入允许使用添加模态函数的@Modal别名。
@Modal()
export class LoginModalComponent {

  loginStatus: boolean = true;
  closeModal: Function;
  
  // 将获取从回调函数传递的用户名。
  userCreds;

  constructor() { }

  onCancel(): void {
    this.closeModal();
  }

  onSubmit(formCreds): void {
    event.preventDefault();

    if ((formCreds.username === this.userCreds.username) && (formCreds.password === this.userCreds.password)) {
      this.loginStatus = true;
      this.closeModal();
    } else {
      this.loginStatus = false;
    }
  }
}

login-modal.componenet.html

<!-- Modal Setup -->
<div class="modal">
  <div class="modal-content">
    <h4>Admin login</h4>
    <a role="button" (click)="onCancel()"><i class="icon ion-close-round"></i></a>
    <form (ngSubmit)="onSubmit(loginForm.value);" #loginForm="ngForm">
      <div class="form-group">
        <label class="sr-only" for="username">邮箱地址</label>
        <input type="text" class="form-control" id="name" placeholder="Username" name="username" ngModel required>
      </div>
      <div class="form-group">
        <label class="sr-only" for="password">密码</label>
        <input type="password" class="form-control" id="password" placeholder="Password" name="password" ngModel required>
      </div>
      <button type="submit" class="btn btn-default" [disabled]="!loginForm.form.valid">登录</button>
    </form>
    <h4 style="color:red" *ngIf="!loginStatus">Wrong Credentials! try 'user' as username and 'pass' as password.</h4>
  </div>
</div>
<!-- END Modal Setup -->

<!-- Modal Overlay -->
<div class="modal-overlay"></div>

login-modal.componenet.css

.modal {
    /* 这样它可以是显示flex或网格或其他。 */
    display: block;
    /* 可能需要媒体查询这里 */
    width: 600px;
    max-width: 100%;
    height: 400px;
    max-height: 100%;
    position: fixed;
    z-index: 9000;
    left: 50%;
    top: 50%;
    /* 如果宽度/高度未知,请使用这个定心 */
    transform: translate(-50%, -50%);
    /* 如果知道的话,负边距可能更好(减少文本模糊的可能性)。 */
    /* margin: -200px 0 0 -200px; */
    background: white;
    box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
}

.modal-content {
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 20px 50px 20px 20px;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 8000;
    background: rgba(0, 0, 0, 0.6);
}

这是如何使用模态功能的完整示例,一旦完成其目的,该组件将被销毁。