Angular的简单Cool对话框组件– ngx-cool-dialogs

Angular的简单Cool对话框组件– ngx-cool-dialogs
插件名称 ngx-cool-dialogs
发布时间 2020年6月12日
插件作者 caroso1222

ngx-cool-dialogs组件可帮助您轻松为Angular 5+应用程序创建惊人的警报,确认和提示对话框。

特征:

  • 跨浏览器兼容
  • 反应灵敏
  • 易于使用
  • 高度可配置
  • 与官方Angular格式打包
  • 良好的a11y和i18n支持

安装:

# NPM
$ npm install ngx-cool-dialogs --save

使用:

将添加NgxCoolDialogsModule到您的核心模块(例如app.module.ts)。您可以选择将config对象作为forRoot方法的参数。

import { NgxCoolDialogsModule } from 'ngx-cool-dialogs';

@NgModule({
  ...,
  imports: [
    ...,
    NgxCoolDialogsModule.forRoot(globalConfig)
  ],
  ...
})
export class MyCoreModule { }

将服务NgxCoolDialogsService作为组件的依赖项注入。

constructor(private coolDialogs: NgxCoolDialogsService) {}

确保已BrowserAnimationsModule导入根模块(例如app.module.ts)。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
  declarations: [ ... ],
  imports: [
    ...,
    BrowserAnimationsModule,
    ...
  ],
  providers: [ ... ],
  bootstrap: [AppComponent]
})

开始创建对话框,好像没有明天一样。使用这些简单的三个方法:alertconfirmprompt

// Alert
this.coolDialogs.alert('哇,小子,小心点!');

// Confirm
this.coolDialogs.confirm('你盲目地接受我们的条件吗?')
  .subscribe(res => {
    if (res) {
      console.log('您点击OK。你愚蠢。');
    } else {
      console.log('你点击取消。你聪明。');
    }
  });

// 提示。回调参数有以下形式:
// { result: boolean, value: string }
this.coolDialogs.prompt('请在下面输入您的电子邮件。')
  .subscribe(res => {
    if (res.result) {
      console.log('谢谢,现在我们收到了您的邮件:', res.value);
    }
  });