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

Question

我似乎无法让这些工作在一起.我正在使用Aurelia CLI并以类似的方式为其他库成功完成(如select2,spin,moment和numbers).我似乎无法工作.这是我到目前为止所拥有的.

首先,我跑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"]
}

在依赖的底部.

由于与jquery的.d.ts文件冲突,注释掉1839行(declare var $: cssSelectorHelper;)typings/globals/angular-protractor/index.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');
  }
}

错误:ReferenceError:未定义toastr

---

尝试2

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

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

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

错误:TypeError:this.toastr.info不是函数

---

尝试3

import * as toastr from 'toastr';

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

错误:TypeError: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');
  }
}

错误:TypeError:this.toastr.info不是函数

---

当我从命令行运行时,所有这些都适当地转换au build.我没有错.

我迷失了我所缺少的东西或我还能尝试的其他东西.任何帮助将不胜感激!

---

更新:我的猜测是,aurelia-cli在aurelia-cli加载机制方面存在错误或更有可能我错误地处理包.当我从他们的站点获取typescript骨架时,使用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可用的情况发生.

要求将HTML app.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');
  }
}