如何在angular2中添加annyang库? [英] How to add annyang library in angular2?
问题描述
我需要在angular2中添加 annyang 库.任何人都可以建议我如何使用system.js和typescript进行添加吗?我们有一个角度为1的服务.
I need to add annyang library in angular2. Can anyone please suggest me how to add using system.js and typescript? We have a angular 1 service.
我创建了一个annyang服务,代码为
I created a annyang service the code is
import {Injectable} from '@angular/core'
declare let annyang:any
@Injectable()
export class AnnyangService {
start() {
annyang.addCommands(this.commands);
annyang.start({continuous: false });
}
commands = {};
}
组件代码
import { Component,EventEmitter } from '@angular/core'
import {EventsListComponent} from './events/events-list.components'
import {NavBarComponent} from './nav/navbar.component'
import {AnnyangService} from './common/annyang.service'
declare var annyang:any
@Component({
selector: 'events-app',
template: `
<h3>{{iv}}</h3>
<button class="btn btn-primary" (click) = "clickEvent()">click</button>
})
export class EventsAppComponent{
iv:any
nameArray:Array<string> = ["a","p","n"]
constructor(private annyang:AnnyangService){
}
ngOnInit(){
this.iv="asdf"
console.log(this.iv)
this.annyang.commands = {
'*val': (val)=>{
console.log("command start")
this.updateVar(val)
}
}
this.annyang.start();
}
clickEvent = function(){
let abc = this.nameArray[Math.floor(Math.random() * (this.nameArray.length)) + 0]
this.updateVar(abc)
console.log(abc)
}
updateVar = function(val){
console.log(this.iv)
this.iv = val
console.log(this.iv)
}
}
单击按钮,我可以更改"iv",但使用annyang时虽然使用相同的updateVar却无法获取更新的值,并且它也反映在控制台中.我需要任何事件方法来代替ngOnInit吗?还是我致电服务的方式不正确?
on click of button I am able to change "iv" but using annyang not getting the updated value though using the same updateVar and it is reflecting in console also. Do I need any event method instead of ngOnInit? or the way I am calling the service is not proper?
推荐答案
这是一个AMD模块,因此应该很简单. (步骤4和5是可选步骤,但建议使用)
It is an AMD module so this should be straightforward. (Steps 4 and 5 are optional but recommended)
-
如果您使用的是jspm,请运行
If you are using jspm, run
jspm install npm:annyang
并跳至步骤 3
否则,如果您使用的是npm,请运行
Otherwise, if you are using npm, run
npm install annyang --save
将以下内容添加到 systemjs.config.js
SystemJS.config({
map {
// whatever is there now...
"annyang": "npm:annyang/dist/annyang.js"
}
});
在 annyang-service.ts
import annyang from 'annyang';
import {Injectable} from '@angular/core';
@Injectable({providedIn: 'root'})
export default class AnnyangService {
start() {
annyang.addCommands(this.commands);
annyang.debug(true);
annyang.start();
}
commands = {};
}
由于annyang目前似乎没有任何可用的类型文件,因此我们可以通过创建一个名为 extra-types/annyang.d.ts的声明文件开始对它们进行存根处理. strong>
Since it doesn't look like annyang has any typings files available at this time, we can start to stub one out by creating a declaration file named extra-types/annyang.d.ts
export default annyang;
declare const annyang: {
addCommands: <T extends {}>(commands: T) => void,
debug: (yn?: true) => void,
start: () => void
};
在 tsconfig.json
{
"compilerOptions": {
// whatever is there now...
"baseUrl": ".",
"paths": {
"annyang": [
"extra-types/annyang"
]
}
}
}
这篇关于如何在angular2中添加annyang库?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!