Question

我正在尝试使用AlertifyJS（v1.9.0）在我的角度2应用程序中工作。我在vendor.ts中有以下内容

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

以下调用alertify

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

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

但不断收到错误

: Cannot find name 'alertify'.

Answer 1

好的伙计们，我明白了。它就像放这条线一样简单

var alertify = require('alertifyjs');

在我的导入语句后立即

Answer 2

我遇到了同样的问题。

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

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

Ps Angullar 11 我们不需要向 app.module（providers 数组）添加服务。

 "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"
        ]

Answer 3

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

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

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

Answer 4

安装软件包：

npm install alertify.js@^1.0.12 --save

然后您可以通过将其导入文件中来在组件中使用

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

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

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

Answer 5

您可以使用

import alertifyjs from 'alertifyjs';

为此，您必须安装alertifyjs软件包

因此请使用以下命令

npm i alertifyjs

Answer 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.");

Answer 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()，而无需设置为全局变量。

Answer 8

对于角度 11

npm install alertifyjs --save

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

"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.ts 的 provider 数组中注册此服务

  providers: [
    AlertifyService
  ]

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

如何在角度2中使用ALERTIFY JS（v1.9.0）

8 个答案: