我如何在打字稿中使用 document.addEventListener？答案

【问题标题】：how can i use document.addEventListener in typingscript?我如何在打字稿中使用 document.addEventListener？
【发布时间】：2017-05-07 16:53:21
【问题描述】：

我正在使用 ionic --v2。现在只有我在学习 ionic v2 和我使用了 document.addEventListener 但我抛出了错误，我在下面提到了

> [11:10:21]  ionic-app-scripts 0.0.47
[11:10:21]  build dev started ...
[11:10:21]  clean started ...
[11:10:21]  clean finished in less than 1 ms
[11:10:21]  copy started ...
[11:10:21]  transpile started ...
[11:10:31]  typescript: C:/Users/skeintech/Anguler2/sample/src/pages/sample/sample.ts, line: 25
            ';' expected.

      L25:  [11:10:31]  typescript: C:/Users/skeintech/Anguler2/sample/src/pages/sample/sample.ts, line: 25 document
.addEventListener('deviceready', onDeviceReady, false);

            Parameter declaration expected.

[11:10:31]  typescript: C:/Users/skeintech/Anguler2/sample/src/pages/sample/sample.ts, line: 25       L25:
document.addEventListener('[11:10:31]  typescript: C:/Users/skeintech/Anguler2/sample/src/pages/sample/sample.ts, line: 25 d
e[11:10:31]  typescript: C:/Users/skeintech/Anguler2/sample/src/pages/sample/sample.ts, line: 25
vicerea[11:10:31]  typescript: C:/Users/skeintech/Anguler2/sample/src/pages/sample/sample.ts, line: 25 d
y'[11:10:31]  typescript: C:/Users/skeintech/Anguler2/sample/src/pages/sample/sample.ts, line: 43 , onDeviceReady, false);


            ';' expected.

      L25:  document.addEventListener('deviceready', onDeviceReady, false);

            ';' expected.

      L25:  document.addEventListener('deviceready', onDeviceReady, false);

            Unexpected token. A constructor, method, accessor, or property was expected.

      L25:  document.addEventListener('deviceready', onDeviceReady, false);

            ';' expected.

      L25:  document.addEventListener('deviceready', onDeviceReady, false);

            Declaration or statement expected.


[11:10:31]  transpile failed
[11:10:31]  ionic-app-script task: "build"
[11:10:31]  TypeError: error.message.indexOf is not a function

npm ERR! Windows_NT 10.0.10240
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\skeintech\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "ionic:build" "--"
npm ERR! node v4.4.7
npm ERR! npm  v4.0.3
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ ionic:build: `ionic-app-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-hello-world@ ionic:build script 'ionic-app-scripts build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ionic-app-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ionic-hello-world
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ionic-hello-world
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\skeintech\Anguler2\sample\npm-debug.log

我的 ts 代码

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { Device } from 'ionic-native';

@Component({
  selector: 'page-sample',
  templateUrl: 'sample.html'
})
export class SamplePage {

  constructor(public navCtrl: NavController) {


  }

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
            // Handle the Cordova pause and resume events
            document.addEventListener('pause', onPause, false);
            document.addEventListener('resume', onResume, false);

            // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        }

        function onPause() {
            // TODO: This application has been suspended. Save application state here.
        }

        function onResume() {
            // TODO: This application has been reactivated. Restore application state here.
        }

}

如何在 typesript 中为 document.addEventListener 函数使用正确的格式。谢谢。

【问题讨论】：

标签： angularjs typescript ionic2 hybrid-mobile-app

【解决方案1】：

import { Directive, ElementRef, Input, Renderer, HostListener } from '@angular/core';
@Directive({
             selector: '[imageDirective]',
             host: { '(load)': 'handleLoad()' }
          })
export class ImageDirective {
    constructor(private _el: ElementRef, private renderer: Renderer) {
        setTimeout(()=>{
           this.renderer.setElementStyle(this._el.nativeElement, 'display', 'none');
        })
    }
    handleLoad(){
        setTimeout(()=>{
            this.renderer.setElementStyle(this._el.nativeElement, 'display', 'block');
            this._el.nativeElement.nextElementSibling.outerHTML = '';
        },10)
    }
}

您可以使用 Angular2 HostListener 来处理事件。

谢谢，希望对你有所帮助。

【讨论】：

【解决方案2】：

从'@angular/core'导入{组件，OnInit，ViewChild}；从 'ionic-angular' 导入 { Platform, Nav, NavController };

@Component({
    template: `<ion-nav #myNav [root]="_rootPage"></ion-nav>
    `})

export class MyApp implements OnInit {
    @ViewChild('myNav') nav: NavController
    public _rootPage: any;
    constructor(private _platform: Platform) {
    }

    ngOnInit() {
        this._platform.ready().then(() => {
            StatusBar.styleDefault();
        });
    }
    }

您也可以使用离子“平台”类来解决您的问题。一世认为它会帮助你。谢谢

【讨论】：