首先我运行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'); } }
尝试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'); } }