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

Question

我需要在 angular2 中添加annyang库。谁能建议我如何使用 system.js 和 typescript 添加？我们有一个 angular 1服务。

我创建了一个 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 吗？或者我调用服务的方式不正确？

score 4 · Accepted Answer

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

score 0 · Accepted Answer

使用 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;
                })
        });
    });
};

它对我有用。

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

2 回答 2

Related

Reference