angular - 如何在angular2中添加annyang库？

我需要在angular2中添加annyang库。有人能建议我如何使用system.js和typescript添加吗？我们有一个角度1service。
我创建了一个annyang服务代码是

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吗？或者我打电话的方式不合适？

最佳答案

它是一个AMD模块，所以这应该是直接的。（步骤4和5是可选的，但建议您执行）
如果使用jspm，请运行

jspm install npm:annyang

跳到第3步
否则，如果使用npm，请运行

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的声明文件来删除一个类型文件。

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"
      ]
    }
  }
}