6

我正在尝试让 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'.
4

9 回答 9

3

安装包：

npm install alertify.js@^1.0.12 --save

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

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

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

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

于 2018-08-01T11:30:57.817 回答
3

好的，伙计们，我得到了它的工作。就像放这条线一样简单

var alertify = require('alertifyjs');

就在我的进口声明之后

于 2017-03-02T19:12:57.810 回答
1

我有同样的问题。

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

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

Ps Angullar 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"
        ]
于 2021-02-17T15:28:15.507 回答
0

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

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

alertify message inside function.
alertify.success(response.msg);
于 2018-06-01T13:32:49.767 回答
0

您可以使用

import alertifyjs from 'alertifyjs';

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

所以使用下面的命令

npm i alertifyjs
于 2019-06-10T10:00:47.790 回答
0

这是通过一个两步的方法：

// 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;

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

于 2019-10-17T05:13:55.067 回答
0

对于角 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
  ]

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

于 2020-12-25T07:34:39.837 回答
0

首先你需要安装它 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.");

于 2019-08-23T06:58:04.343 回答
0

第一步安装 alertify 库

npm install alertifyjs --save

在您的服务中导入 alertify

import alertifyjs from 'alertifyjs';

使用此示例代码

  success(message: string) {
    alertify.success(message);
  }
于 2021-09-21T17:44:32.293 回答