尝试在Angular2中使用带有IWindow接口的speechSynthesis

时间:2017-03-15 05:52:31

标签: angular interface window angular2-services speech-synthesis

我正在尝试使用speechSynthesis http://blog.teamtreehouse.com/getting-started-speech-synthesis-api

首先,我使用界面扩展了窗口:

window.interface.ts

export interface IWindow extends Window {
  webkitSpeechRecognition: any;
  speechSynthesis: any;
}

接下来我做了一个窗口服务:

window.service.ts

import { Injectable } from '@angular/core';
import { IWindow } from '../interfaces/window-interface';

function _window() : IWindow {
   return window;
}
@Injectable()
export class WindowService {
   get nativeWindow() : any {
      return _window();
   }
}

现在在组件中,我正在尝试实现它......但没有成功..

app.component

import { Component, OnInit, ViewChild } from '@angular/core';
import { WindowService } from '../../providers/window.service';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['.app.component.scss']
})
export class AppComponent implements OnInit {
   constructor(private _router: Router, private _window: WindowService ) { }

   sayIt() {
      var utterance = new SpeechSynthesisUtterance('Hello World');
      this._window.speechSynthesis.speak(utterance);
   }
}

TS错误:

Cannot find name 'SpeechSynthesisUtterance'.)
Property 'speechSynthesis' does not exist on type 'WindowService'.)

我还将这篇文章用于语音识别作为参考:Angular2: Web Speech API - Voice recognition

仍然出现错误 -     属性'speechSynthesis'在'Window'类型上不存在

1 个答案:

答案 0 :(得分:2)

可以按照以下方式完成

  $("#vacationimages", "src").click(function(){

 $("#firstname").text("");

 $("#bigimage").show("slow");

   var myfirst = $("#firstname").val();

  $("#currentimage").attr("src", "ocean.jpg");

   $("#currentimage").attr("src", "desert.jpg");

从链接获得帮助

  

SpeechRecognition and SpeechSynthesis in TypeScript