如何在 Angular 2 中使用 ALERTIFY JS (v1.9.0)答案

【问题标题】：How to use ALERTIFY JS (v1.9.0) in angular 2如何在 Angular 2 中使用 ALERTIFY JS (v1.9.0)
【发布时间】：2017-03-02 18:50:13
【问题描述】：

我正在尝试让 AlertifyJS (v1.9.0) 在我的 angular 2 应用程序中工作。我在 vendor.ts 中有以下内容

import "alertifyjs/build/alertify.min.js";
import "alertifyjs/build/css/alertify.min.css";

通过以下调用来提醒

openConfirmationDialog(message: string, okCallback: () => any) {

    alertify.confirm(message, function (e: any) {
        if (e) {
            okCallback();
        } else {
        }
    });
}

但不断收到错误

: Cannot find name 'alertify'.

【问题讨论】：

标签： angular typescript2.0 alertifyjs

【解决方案1】：

好的，伙计们，我搞定了。就这么简单，只要写上这条线

var alertify = require('alertifyjs');

就在我的导入语句之后

【讨论】：

【解决方案2】：

安装包：

npm install alertify.js@^1.0.12 --save

然后你可以通过在文件中导入它来使用你的组件，

import * as alertify from 'alertify.js';//import

alertify.logPosition('bottom right').log("Pattern Selected");//example

我指定了版本，因为我测试了它并且它对我来说工作正常。以前的版本不工作。

【讨论】：

【解决方案3】：

我遇到了同样的问题。

我错误地将 css 和 js 路径添加到“样式”但用于“测试”

angular.json 文件中有两个“样式”部分:)

Ps Angular 11 我们不需要向 app.module (providers array) 添加服务。

 "styles": [
          "./node_modules/alertifyjs/build/css/alertify.min.css",
          "./node_modules/alertifyjs/build/css/themes/bootstrap.min.css",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.less"
        ],
        "scripts": [
          "./node_modules/alertifyjs/build/alertify.min.js"
        ]

【讨论】：

【解决方案4】：

alertify.js 插件文件包含 index.html

import { Component, OnInit } from '@angular/core';
declare var alertify:any;

alertify message inside function.
alertify.success(response.msg);

【讨论】：

【解决方案5】：

你可以使用

import alertifyjs from 'alertifyjs';

为此，您必须安装 alertifyjs 包

所以使用下面的命令

npm i alertifyjs

【讨论】：

【解决方案6】：

首先你需要安装它 npm install alertifyjs --save

接下来你必须在 angular.json 文件中导入以下内容

脚本数组中的“node_modules/alertifyjs/build/alertify.min.js”和

“node_modules/alertifyjs/build/css/alertify.min.css”和

样式数组中的“node_modules/alertifyjs/build/css/themes/default.min.css”

你还需要在你必须使用的组件中导入alertifyjs。在组件顶部写import * as alertify from 'alertifyjs'; 以将其导入到您的组件中。例如： alertify.minimalDialog || alertify.dialog('minimalDialog',function(){ return { main:function(content){ this.setContent(content); } }; }); alertify.minimalDialog("Minimal button-less dialog.");

【讨论】：

【解决方案7】：

分两步走：

// import 
import alertifyjs from 'alertifyjs';

// set for global if you wish to use outside of this file (such as Laravel app.js)
window.alertify = alertifyjs;

如果您只想在该文件中使用，只需导入并使用 alertify.success() 而不设置为全局变量。

【讨论】：

【解决方案8】：

对于角 11

npm install alertifyjs --save

然后在styles数组下的angular.json上放这些行

"styles": [
    "node_modules/alertifyjs/build/css/alertify.min.css",
    "node_modules/alertifyjs/build/css/themes/bootstrap.min.css"
],

然后在angular.json文件下scripts数组下放这一行。

"scripts": [
  "node_modules/alertifyjs/build/alertify.min.js"
]

之后创建名为alertify.service.ts的新服务

import { Injectable } from '@angular/core';
declare let alertify: any;

@Injectable({
  providedIn: 'root'
})
export class AlertifyService {

  constructor() { }
  
  confirm(message: string, okCallback: () => any) {
    alertify.confirm(message, function(e:any) {
      if (e) {
        okCallback();
      }
    });
  }

  success(message: string) {
    alertify.success(message);
  }

  error(message: string) {
    alertify.error(message);
  }

  warning(message: string) {
    alertify.success(message)
  }

  message(message: string) {
    alertify.message(message)
  }
}

现在在app.module.tsprovider 数组中注册此服务

  providers: [
    AlertifyService
  ]

现在在您的组件中注入此服务。

【讨论】：

【解决方案9】：

第一步安装alertify库

npm install alertifyjs --save

在你的服务中导入alertify

import alertifyjs from 'alertifyjs';

使用此示例代码

  success(message: string) {
    alertify.success(message);
  }

【讨论】：