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

前端之家收集整理的这篇文章主要介绍了toastr.js如何在Aurelia和Typescript中工作?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我似乎无法让这些工作在一起.我正在使用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","resources": [
"toastr.min.css"
],"deps": ["jquery"]
}

在依赖的底部.

由于与jquery的.d.ts文件冲突,在typings / globals / angular-protractor / index.d.ts上注释掉第1839行(声明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,然后打开浏览器并导航到命令行显示应用程序可用的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一起使用?

解决方法

经过很多时间和朋友的帮助,我终于能够让这个工作了.

只需要做一些改变 –

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>

希望这可以帮助.

UPDATE@H_502_85@然后在视图模型中使用它,您可以通过以下几种方式之一来实现:

import * as toastr from 'toastr';

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

export class App {
  attached() {
    success('here');
  }
}
原文链接:https://www.f2er.com/js/150132.html

猜你在找的JavaScript相关文章