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

Posted 2023-05-08

【中文标题】toastr.js 如何在 Aurelia 和 Typescript 中工作？

【英文标题】：How can toastr.js work in Aurelia and Typescript?

【发布时间】：2016-12-25 15:41:14

【问题描述】：

我似乎无法让它们一起工作。我正在使用 Aurelia CLI，并以类似的方式成功地为其他库（如 select2、spin、moment 和 numeric）。不过，我似乎无法让 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"]

到依赖项的底部。

由于与 jquery 的 .d.ts 文件冲突，请在 typings/globals/angular-protractor/index.d.ts 上注释掉第 1839 行（declare var $: cssSelectorHelper;）。

将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，然后打开浏览器并导航到命令行显示应用程序可用的网址（通常为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 一起使用吗？

---

【问题讨论】：

什么对我有用（但使用纯 ES6+ 且没有 TypeScript）是这样的：import toastr from 'toastr';

是的，这会在 TypeScript 中产生转译错误。 import Toastr from 'toastr';

也是如此

您尝试过尝试 2 或 4，但在构造函数中使用了 this.toastr = toastr;？除非那是@autoinject() 所做的事情；我不太喜欢我的 Aurelia。

感谢您的建议，但对于 Aurelia，将参数设为私有会在视图模型上创建一个与参数名称相同的属性。如果没有，那么 this.toastr 就不会编译。

【参考方案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');
  

【讨论】：

对我来说，第 1 步和第 4 步就足够了。

你好，你能完成答案吗？我仍然坚持现在应该如何导入它？