Question

我需要在angular2中添加annyang库。任何人都可以建议我如何添加使用system.js和打字稿？我们有一个角度为service。

我创建了一个代码为

的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)
    }        
}

点击按钮我可以改变＆＃34; iv＆＃34;但是使用annyang虽然使用相同的updateVar但没有获得更新的值，它也在控制台中反映出来。我需要任何事件方法而不是ngOnInit吗？或者我打电话给服务的方式不合适？

Answer 1

这是一个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" ] } } }

Answer 2

使用ngZone解析

ngOnInit() {
    this.annyang.commands = {
        '*val': (val)=> {
            console.log("command start");
            this.captureVoiceAndSearchVideos(val);
        }
    };
    this.annyang.start();

}

captureVoiceAndSearchVideos = function (val) {
    this._ngZone.runOutsideAngular(() => {
        this._ngZone.run(() => {
            this.searchText = val;
                .subscribe(data=> {
                    this.results = data;
                })
        });
    });
};

它适用于我。

如何在angular2中添加annyang库？

2 个答案: