Angular2 气球消息

功能：在屏幕右上角向用户显示气球。

有4种消息类型：成功、信息、警告和错误。

错误需要在关闭前点击。

此气球消息 NPM 使用 TypeScript 为 Angular2 编写，并使用 bootstrap3 类进行样式。

设置和示例用法

构建文件 - angular-cli.json

将 bootstrap css 文件添加到您的包构建器文件中，对于 angular-cli，请将其添加到 apps.styles 数组中

{
  ...
  "apps": [
    {
      ...

      "styles": [
        ...
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],

app.component.html

在您的 main component.html 中添加以下内容

<ng2-balloon-msg></ng2-balloon-msg>

app.module.ts

将以下行添加到您的 apps 主模块导入（app.module.ts）中

import { Ng2BalloonMsgModule, Ng2BalloonMsgService} from "@synerty/ng2-balloon-msg";

再次，在主模块中，将 Ng2BalloonMsgModule 添加到 "导入" 数组中。

Ng2BalloonMsgModule

最后，将 Ng2BalloonMsgService 添加到 "提供者" 数组中

Ng2BalloonMsgService

示例

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    Ng2BalloonMsgModule
  ],
  providers: [Ng2BalloonMsgService],
  bootstrap: [AppComponent]
})
export class AppModule { }

where-ever.component.ts

在您的应用程序的任何地方使用气球服务

导入服务

import {Ng2BalloonMsgService} from "@synerty/ng2-balloon-msg";

将其添加到组件构造函数中。

constructor(private msgService: Ng2BalloonMsgService) {

现在调用显示函数

    this.msgService.showSuccess("This is a test SUCCESS");
    this.msgService.showInfo("This is a test info");
    this.msgService.showWarning("This is a test warning");
    this.msgService.showError("This is a test error");

您还可以创建模态对话框

    let p = this.msgService.showMessage(
        "This is a Error Confirm Cancel.",
        UsrMsgLevel.Error,
        UsrMsgType.ConfirmCancel, {
            confirmText: "OK Confirm",      // Optional
            cancelText: "Cancel xx",        // Optional
            dialogTitle: "Awesome title"    // Optional
    
        }
    );
    
    p.catch(err => {
        console.log("Ignoring reject call from promise for this test.");
    });

脚手架

此项目使用 angular-cli 版本 1.0.0-beta.20-4 生成。

默认的 angular-cli 测试应用程序被用作测试床以显示消息。下面是 angular-cli 使用的标准说明。

开发服务器

运行 ng serve 以启动开发服务器。导航到 http://localhost:4200/。如果更改了任何源文件，应用程序将自动重新加载。

代码脚手架

运行 ng generate component component-name 以生成新组件。您还可以使用 ng generate directive/pipe/service/class。

构建

运行 ng build 以构建项目。构建工件将存储在 dist/ 目录中。使用 -prod 标志进行生产构建。

运行单元测试

运行 ng test 通过 Karma 执行单元测试。

运行端到端测试

运行 ng e2e 通过 Protractor 执行端到端测试。在运行测试之前，请确保您正在通过 ng serve 提供应用程序。

部署到 Github Pages

运行 ng github-pages:deploy 以部署到 Github Pages。