Angular 2+的简单模态库

Angular 2+的简单模态库
插件名称 ngx-simple-modal
发布时间 2020年6月4日
插件作者 KevCJones

一个简单的不受限制的框架,用于在角度(v2 +)项目中实现基于模式的简单行为。

它是一个使Angular(2+)中的模态更容易的库,没有依赖关系,但可与引导程序或其他框架一起很好地使用。

  • 创建清晰且可重复使用的模态组件。
  • 它使管理模式变得轻松而清晰。
  • 扩展ModalComponent类并实现所需的任何内容。

安装:

# NPM
$ npm install ngx-simple-modal --save

快速开始

我们为您服务,您可以@import '../node_modules/ngx-simple-modal/styles/simple-modal.scss'进入想要的基于root的scss全局样式。根据要插入的位置更新相对路径。

如果您想要我们的基本样式,则假定为HTML模板

<div class="modal-content">
    <div class="modal-header">
      <!-- 您的标题 -->
    </div>
    <div class="modal-body">
      <!-- 模态自定义内容 -->
    </div>
    <div class="modal-footer">
      <!--
        用于添加按钮控件的页脚,
        例如.: <button (click)="close()">Cancel</button>
      -->
    </div>
</div>

步骤1.导入“ SimpleModalModule ”模块

app.module.ts:

import { NgModule} from '@angular/core';
import { CommonModule } from "@angular/common";
import { BrowserModule } from '@angular/platform-browser';
import { SimpleModalModule } from 'ngx-simple-modal';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    SimpleModalModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

默认情况下,模式占位符将添加到AppComponent。但是您可以选择自定义占位符(即文档主体):

imports: [
    ...
    SimpleModalModule.forRoot({container:document.body})
  ]

如果您想要在初始加载期间尚未在DOM中出现的容器,则可以将promiseLike函数传递给容器,例如

imports: [
    ...
    SimpleModalModule.forRoot({container: elementPromisingFn()})
  ]

这里elementPromisingFn是你想要的,只要其resolvement返回从一个DOM节点nativeElement什么。

全局设置模式默认值

可选的第二个参数采用类型为SimpleModalOptions的全局对象(所有必填字段)..如果愿意,可以使用defaultSimpleModalOptions进行传播。

imports: [
    ...
    SimpleModalModule.forRoot({container: 'modal-container'}, {...defaultSimpleModalOptions, ...{
      closeOnEscape: true,
      closeOnClickOutside: true,
      wrapperDefaultClasses: 'o-modal o-modal--fade',
      wrapperClass: 'o-modal--fade-in',
      animationDuration: 300,
      autoFocus: true
    }})

  ]

或者,如果您需要更精细地控制行为,则可以像这样在模块或本地中提供配置

provide:[
  {
    provide: DefaultSimpleModalOptionConfig,
    useValue: {...defaultSimpleModalOptions, ...{ closeOnEscape: true, closeOnClickOutside: true }}
  }
]

步骤2.创建模态组件

您的模态应该从SimpleModalComponent扩展。 SimpleModalService是具有两个参数的泛型类:

  1. 输入模态数据类型(用于初始化组件的数据);
  2. 模态结果类型;

因此SimpleModalService应该是一个构造函数参数SimpleModalComponent

Confirm.component.ts:

import { Component } from '@angular/core';
import { SimpleModalComponent } from "ngx-simple-modal";
export interface ConfirmModel {
  title:string;
  message:string;
}
@Component({
    selector: 'confirm',
    template: `
      <div class="modal-content">
        <div class="modal-header">
          <h4>{{title || 'Confirm'}}</h4>
        </div>
        <div class="modal-body">
          <p>{{message || 'Are you sure?'}}</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-danger" (click)="close()" >Cancel</button>
          <button type="button" class="btn btn-primary" (click)="confirm()">OK</button>
        </div>
      </div>
    `
})
export class ConfirmComponent extends SimpleModalComponent<ConfirmModel, boolean> implements ConfirmModel {
  title: string;
  message: string;
  constructor() {
    super();
  }
  confirm() {
    // we set modal result as true on click on confirm button,
    // then we can get modal result from caller code
    this.result = true;
    this.close();
  }
}

步骤3.将创建的组件注册到模块

将组件添加到声明entryComponents部分,因为该组件将动态创建。

app.module.ts:

    import { NgModule} from '@angular/core';
    import { CommonModule } from "@angular/common";
    import { BrowserModule } from '@angular/platform-browser';
    import { SimpleModalModule } from 'ngx-simple-modal';
    import { ConfirmComponent } from './confirm.component';
    import { AppComponent } from './app.component';
    @NgModule({
      declarations: [
        AppComponent,
        ConfirmComponent
      ],
      imports: [
        CommonModule,
        BrowserModule,
        SimpleModalModule
      ],
      //Don't forget to add the component to entryComponents section
      entryComponents: [
        ConfirmComponent
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

步骤4.用法

app.component.ts

    import { Component } from '@angular/core';
    import { ConfirmComponent } from './confirm.component';
    import { SimpleModalService } from "ngx-simple-modal";

    @Component({
      selector: 'app',
      template: `
        <div class="modal-content">
          <div class="modal-header">
            <h4>Confirm</h4>
          </div>
          <div class="modal-body">
            <p>Are you sure?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" (click)="showConfirm()">Show confirm</button>
          </div>
        </div>
      `
    })
    export class AppComponent {
        constructor(private simpleModalService:SimpleModalService) {}
        showConfirm() {
            let disposable = this.simpleModalService.addModal(ConfirmComponent, {
                  title: 'Confirm title',
                  message: 'Confirm message'
                })
                .subscribe((isConfirmed)=>{
                    //We get modal result
                    if(isConfirmed) {
                        alert('accepted');
                    }
                    else {
                        alert('declined');
                    }
                });
            //We can close modal calling disposable.unsubscribe();
            //If modal was not closed manually close it by timeout
            setTimeout(()=>{
                disposable.unsubscribe();
            },10000);
        }
    }