toastr.js 如何在 Aurelia 和 Typescript 中工作？

Question

我似乎无法让它们协同工作。我正在使用 Aurelia CLI，并以类似的方式成功地对其他库（如 select2、spin、moment 和 numeral）进行了操作。我似乎无法让 toastr 工作。这是我目前所拥有的。

首先我运行npm install toastr --save和typings install dt~toastr --global --save

在 aurelia.json 中，在 vendor-bundle.js 部分，我添加了一个依赖项：

  "jquery",
  {
    "name": "toastr",
    "path": "../node_modules/toastr/build",
    "main": "toastr.min",
    "resources": [
      "toastr.min.css"
    ],
    "deps": ["jquery"]
  }

更新：重现的完整步骤

我安装了这些工具的这些版本：node (6.3.0)、npm (3.10.3)、au (0.17.0)

打开命令提示符并键入：

au new au-toastr
3 (Custom)
2 (Typescript)
3 (Sass)
1 (configure unit testing)
1 (Visual Studio Code)
1 (create project)
1 (install project dependencies)
cd au-toastr
npm install jquery --save
npm install toastr --save
typings install dt~jquery --global --save
typings install dt~toastr --global --save

然后在编辑器中打开aurelia.json并添加

"jquery",
{
"name": "toastr",
"path": "../node_modules/toastr/build",
"main": "toastr.min",
"resources": [
"toastr.min.css"
],
"deps": ["jquery"]
}

到依赖项的底部。

注释掉 typings/globals/angular-protractor/index.d.ts 上的第 1839 行 (declare var $: cssSelectorHelper;)，因为它与 jquery 的 .d.ts 文件冲突。

将app.ts内容替换为

import * as toastr from 'toastr';

export class App {
  activate() {
    toastr.info('blah');
  }
}

或

import 'toastr';

export class App {
  activate() {
    toastr.info('blah');
  }
}

在命令提示符中键入 au run，然后打开浏览器并导航至命令行显示应用程序可用的 url（通常为 http://localhost:9000）。

尝试 1

import 'toastr';

export class ViewModel {
  activate() {
    toastr.info('blah');
  }
}

错误：引用错误：未定义 toastr

尝试 2

import {autoinject} from 'aurelia-framework';
import 'toastr';

@autoinject()
export class ViewModel {
  constructor(private toastr: Toastr) {
  }

  activate() {
    this.toastr.info('blah');
  }
}

错误：类型错误：this.toastr.info不是函数

尝试 3

import * as toastr from 'toastr';

export class ViewModel {
  activate() {
    toastr.info('blah');
  }
}

错误：类型错误：toastr.info不是函数

尝试 4

import {autoinject} from 'aurelia-framework';
import * as toastr from 'toastr';

@autoinject()
export class ViewModel {
  constructor(private toastr: Toastr) {
  }

  activate() {
    this.toastr.info('blah');
  }
}

错误：类型错误：this.toastr.info不是函数

当我从命令行运行 au build 时，上面的所有内容 t运行都正常运行。我没有收到任何错误。

我不知道我错过了什么或者我还能尝试什么。任何帮助将不胜感激！

更新： 我的猜测是 aurelia-cli 中存在错误，或者更可能是我在某种程度上错误地处理了关于 aurelia-cli加载机制。当我从他们的网站（使用 jspm 作为模块加载器）获取打字稿骨架并按照上述相同步骤操作时，toastr 工作正常。

我有什么想法可以让它与 aurelia-cli 一起工作吗？

Answer 1

经过很多时间和朋友的帮助，我终于能够让它工作了。

只需要进行一些更改 -

aurelia.json 需要更新才能不使用缩小版的 toastr 库。

{
  //...
  "dependencies": [
  //...
    "jquery",
    {
      "name": "toastr",
      "path": "../node_modules/toastr",
      "main": "toastr",
      "resources": [
        "build/toastr.min.css"
      ],
      "deps": ["jquery"]
    }
  ]
}

toastr.info('here'); 函数调用通常需要在附加方法中或元素在 DOM 中可用之后发生。

要求 app.html 中的 HTML 需要更新为

<require from="toastr/build/toastr.min.css"></require>

希望对您有所帮助。

更新然后在您的视图模型中使用它，您可以通过以下几种方式之一进行：

import * as toastr from 'toastr';

export class App {
  attached() {
    toastr.success('here');
  }
}

import { success } from 'toastr';

export class App {
  attached() {
    success('here');
  }
}

toastr.js 如何在 Aurelia 和 Typescript 中工作？

How can toastr.js work in Aurelia and Typescript?

typescript

toastr

aurelia