How to add annyang library in angular2?

问题

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.

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 = {};
}

Component code

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

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?

回答1:

It is an AMD module so this should be straightforward. (Steps 4 and 5 are optional but recommended)

If you are using jspm, run
```
jspm install npm:annyang
```
and skip to step 3

Otherwise, if you are using npm, run
```
npm install annyang --save
```

Add the following to systemjs.config.js

SystemJS.config({
  map {
    // whatever is there now... 
    "annyang": "npm:annyang/dist/annyang.js"
  }
});

Create a service in 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 = {};
}

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
};
```

Create an entry in tsconfig.json

{
  "compilerOptions": {
    // whatever is there now... 
    "baseUrl": ".",
    "paths": {
      "annyang": [
        "extra-types/annyang"
      ]
    }
  }
}

回答2:

It is resolved using 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;
                })
        });
    });
};

and it works for me.

来源：https://stackoverflow.com/questions/43442379/how-to-add-annyang-library-in-angular2

标签

angular

annyang