どのように私はtypingscriptでdocument.addEventListenerを使用できますか？

Question

私は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. 
     } 

} 

どのように私は、ドキュメントの適切な形式を使用することができます下に言及イオンv2と を学びます.addEventListener関数はタイプ文字で表します。 ありがとうございます。

Answer 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を使用できます。

ありがとうございます。

Answer 2

import @ Component、OnInit、ViewChild from '@ angular/core'; '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(); 
     }); 
    } 
    } 

また、イオンの「プラットフォーム」クラスを使用して問題を解決することもできます。私は それがあなたを助けると思う。 ありがとうございました