toastr.js如何在Aurelia和Typescript中工作? [英] How can toastr.js work in Aurelia and Typescript?
问题描述
我似乎无法使它们一起工作.我正在使用Aurelia CLI，并且已经以类似的方式成功地将其用于其他库(例如select2，spin，矩和数字).不过，我似乎无法敬酒.这是我到目前为止所拥有的.
I can't seem to get these to work together. I'm using the Aurelia CLI and have done so in a similar manner for other libraries successfully(like select2, spin, moment and numeral). I can't seem to get toastr to work though. Here is what I have so far.
首先我运行了npm install toastr --save和typings install dt~toastr --global --save
在aurelia.json的vendor-bundle.js部分中，我这样添加了一个依赖项:
In aurelia.json, in the vendor-bundle.js section, I added a dependency as such:
"jquery",
{
"name": "toastr",
"path": "../node_modules/toastr/build",
"main": "toastr.min",
"resources": [
"toastr.min.css"
],
"deps": ["jquery"]
}
更新:完整的复制步骤
我安装了以下这些工具的版本:节点(6.3.0)，npm(3.10.3)，au(0.17.0)
I have these versions of these tools installed: node (6.3.0), npm (3.10.3), au (0.17.0)
打开命令提示符并键入:
Open a command prompt and type:
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并添加
Then open aurelia.json in an editor and add
"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;)行.
Comment out line 1839(declare var $: cssSelectorHelper;) on typings/globals/angular-protractor/index.d.ts due to conflict with jquery's .d.ts file.
将app.ts内容替换为
import * as toastr from 'toastr';
export class App {
activate() {
toastr.info('blah');
}
}
OR
import 'toastr';
export class App {
activate() {
toastr.info('blah');
}
}
在命令提示符下键入au run，然后打开浏览器并导航到命令行，该URL表示应用程序可以在其中使用(通常为http://localhost:9000).
Type au run in the command prompt and then open a browser and navigate to the url that the command line says the application is available at(usually http://localhost:9000).
尝试1
import 'toastr';
export class ViewModel {
activate() {
toastr.info('blah');
}
}
错误:参考错误:未定义烤面包机
尝试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时，以上所有内容均可正确转换.我没有错误.
All of the above transpile properly when I run au build from the command line. I get no errors.
我迷失了所缺少的东西或可以尝试的其他东西.任何帮助将不胜感激！
I'm lost as to what I am missing or what else I can try. Any help would be greatly appreciated!
更新:我的猜测是aurelia-cli中存在错误，或者关于aurelia-cli加载机制，我更有可能不正确地处理了软件包.当我从他们的网站(使用jspm作为其模块加载器)获取打字稿框架，并按照上述相同的步骤操作时，烤面包机就可以正常工作了.
UPDATE: My guess is that there is either a bug in the aurelia-cli or more likely I'm handling the package incorrectly somehow in regard to the aurelia-cli loading mechanism. When I get the typescript skeleton from their site, which is using jspm as it's module loader, and follow the same steps above, the toastr works just fine.
有什么想法可以使它与aurelia-cli一起使用吗?
Any ideas how I can get this to work with the aurelia-cli?
推荐答案
经过很多时间和朋友的帮助，我终于能够使它工作.
After a lot of time and help from a friend, I was finally able to get this to work.
只需要进行一些更改-
aurelia.json需要更新，以不使用烤面包机库的缩小版本.
aurelia.json needed to be updated to not use the minified version of the toastr library.
{
//...
"dependencies": [
//...
"jquery",
{
"name": "toastr",
"path": "../node_modules/toastr",
"main": "toastr",
"resources": [
"build/toastr.min.css"
],
"deps": ["jquery"]
}
]
}
toastr.info('here');函数调用通常需要在附加方法中或在DOM中的元素可用之后进行.
The toastr.info('here'); function invocation usually needs to happen in the attached method or after the element is available in the DOM.
要要求将app.html中的HTML更新为
To require the HTML in app.html needs to be updated to
<require from="toastr/build/toastr.min.css"></require>
希望这会有所帮助.
更新 然后，可以在视图模型中使用它，可以采用以下几种方法之一:
UPDATE Then to use it in your view model, you could do it one of a few ways:
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中工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
