角度2のイベントハンドラで 'this'にアクセスするには？

Question

私コンポーネントの​​イベントハンドラでは、私はthisを経由してコンポーネントのproperyを変更する必要があります

canvasKeyHandler (event) { 
    console.log('vrscene.canvasKeyHandler: event.keyCode=' + event.keyCode); 
    console.log('vrscene.canvasKeyHandler: self.dolly' + this.dolly); 

    CameraKeypressEvents.keyHandler(event, this.dolly) // <-- do something with this.dolly 

しかしthis.dollyはundefinedに設定されています：

vrscene.canvasKeyHandler: self.dollyundefined 

vrscene.html：

vrscene.ts：

import {Component} from 'angular2/core'; 
import {Injectable} from 'angular2/core'; 
import WebGLRenderer = THREE.WebGLRenderer; 
import {VRRenderer} from '../vrrenderer/vrrenderer' 
import {CameraKeypressEvents} from '../camera-keypress-events/camera-keypress-events' 

import Object3D = THREE.Object3D; 
import Scene = THREE.Scene; 
import PerspectiveCamera = THREE.PerspectiveCamera; 
import Mesh = THREE.Mesh; 
import VRControls = THREE.VRControls; 
import VREffect = THREE.VREffect; 

@Component ({ 
    selector: 'vrscene', 
    templateUrl: 'app//vrscene/vrscene.html', 
}) 

@Injectable() 
export class VRScene { 

    private _scene: Scene; 
    camera: PerspectiveCamera; 
    dolly: Object3D; 
    vrControls: VRControls; 
    vrEffect: VREffect; 
    webVrManager; 
    sphere: Mesh; 
    cube: Mesh; 
    BaseRotation = new THREE.Quaternion(); 

    constructor() {} 

    //initScene(width: number, height: number, renderer: VRRenderer) { 
    init(width: number, height: number, vrRenderer: VRRenderer) { 
    console.log('VRScene.init: entered') 
    this.scene = new THREE.Scene; 

    this.camera = new THREE.PerspectiveCamera(75, width/height); 
    this.camera.position.set(0, 1.5, 100); 
    this.dolly = new THREE.Object3D(); 
    this.dolly.position.z = 50; 
    this.scene.add(this.dolly); 
    // 
    this.dolly.add(this.camera); 

    this.vrControls = new THREE.VRControls(this.camera); 

    this.vrEffect = new THREE.VREffect(vrRenderer.renderer); 
    this.vrEffect.setSize(width, height); 
    this.webVrManager = new (<any>window).WebVRManager(vrRenderer.renderer, this.vrEffect); 
    console.log('VRScene.init: this.webVrManager=' + this.webVrManager); 
    this.camera.quaternion.copy(this.BaseRotation); 

    var geometry = new THREE.BoxGeometry(25, 25, 25); 
    var meshParms = new Object(); 

    meshParms['color'] = 0xff8000; 

    var material = new THREE.MeshBasicMaterial(meshParms); 
    //material = new THREE.MeshBasicMaterial({color: 0xffff00, side: THREE.DoubleSide}); 
    this.cube = new THREE.Mesh(geometry, material); 
    this.scene.add(this.cube); 

    // draw! 
    vrRenderer.canvas.focus(); 
    //CubeOnPlaneScene.prototype.mainLoop.bind(this) 
    // bind the 'this' of the canvasKeyHandler to the definition-time 'this' 
    //VRScene.prototype.canvasKeyHandler.bind(this) 
    } 

    canvasKeyHandler (event, dolly) { 
    console.log('vrscene.canvasKeyHandler: event.keyCode=' + event.keyCode); 
    //console.log('vrscene.canvasKeyHandler: this.dolly' + this.dolly); 
    //console.log('vrscene. 

canvasKeyHandler: self.dolly' + this.dolly); 
    console.log('vrscene.canvasKeyHandler: dolly' + dolly); 

    //CameraKeypressEvents.keyHandler(event, this.dolly) 
    //CameraKeypressEvents.keyHandler(event, VRScene.prototype.canvasKeyHandler) 
    CameraKeypressEvents.keyHandler(event, dolly) 
    } 

    doIt() : string { 
    return 'hello from VRScene' 
    } 

    // getters and setters 
    get scene():Scene { 
    return this._scene; 
    } 

    set scene(scene: Scene) { 
    if (scene === undefined) throw 'Please supply a scene'; 
    this._scene = scene; 
    } 

} 

キーハンドラ：

import {Directive} from 'angular2/core'; 
import {CubeScene} from '../cube-scene/cube-scene'; 
import Object3D = THREE.Object3D; 
import Vector3 = THREE.Vector3; 
import {Base} from '../base/base'; 
import Quaternion = THREE.Quaternion; 


@Directive({ 
    selector: '[camera-keypress-events]', 
    providers: [], 
    //host: {}, 
    host: { 
    '(keypress)' : 'onKeypress($event)' 
    }, 

}) 

export class CameraKeypressEvents { 

    constructor() {} 

    static CAMERA_MOVE_DELTA = 1.2; 
    static CAMERA_ROT_DELTA = 5; 

    static keyHandler (event, dolly: Object3D) { 
    console.log('CameraKeypressEvents.keyHandler: event.keyCode=' + event.keyCode) 
    console.log('CameraKeypressEvents.keyHandler: dolly=' + dolly) 
     switch(event.keyCode) { 
     case 'S'.charCodeAt(0): 
     console.log('you pressed s'); 
     //dolly.position.z += CAMERA_MOVE_DELTA; 
     dolly.translateZ(this.CAMERA_MOVE_DELTA); 
     console.log('dolly.postion.x=' + dolly.position.x); 
     break; 

     case 'W'.charCodeAt(0): 
     //console.log('you pressed s'); 
     //this.dolly.position.z -= this.CAMERA_MOVE_DELTA; 
     dolly.translateZ(-this.CAMERA_MOVE_DELTA); 
     //console.log('this.do-ly.postion.x=' + this.dolly.position.x); 
     break; 

     case 'A'.charCodeAt(0): 
     //this.dolly.position.x -= this.CAMERA_MOVE_DELTA; 
     dolly.translateX(-this.CAMERA_MOVE_DELTA); 
     break; 

     case 'D'.charCodeAt(0): 
     //console.log('you pressed s'); 
     //this.dolly.position.x += this.CAMERA_MOVE_DELTA; 
     dolly.translateX(this.CAMERA_MOVE_DELTA); 
     //console.log('this.dolly.postion.x=' + this.dolly.position.x); 
     break; 

     case 'N'.charCodeAt(0): 
     //this.dolly.position.y -= this.CAMERA_MOVE_DELTA; 
     dolly.translateY(-this.CAMERA_MOVE_DELTA); 
     break; 

     case 'P'.charCodeAt(0): 
     //console.log('you pressed s'); 
     //this.dolly.position.y += this.CAMERA_MOVE_DELTA; 
     //console.log('this.dolly.postion.x=' + this.dolly.position.x); 
     dolly.translateY(this.CAMERA_MOVE_DELTA); 
     break; 

     case 'Q'.charCodeAt(0): 
     var tmpQuat = (new THREE.Quaternion()).setFromAxisAngle(new THREE.Vector3(0,1,0), Base.ONE_DEG * this.CAMERA_ROT_DELTA); 
     dolly.quaternion.multiply(tmpQuat); 
     break; 

     case 'E'.charCodeAt(0): 
     var tmpQuat = (new THREE.Quaternion()).setFromAxisAngle(new THREE.Vector3(0,1,0), Base.ONE_DEG * -this.CAMERA_ROT_DELTA); 
     dolly.quaternion.multiply(tmpQuat); 
     break; 
    }; 
    } 

    onKeypress (event, cubeScene) { 
    console.log('CameraKeypressEvents.onKeypress: event.keyCode=' + event.keyCode) 
     //event.preventDefault(); 
    console.log('vtClass.canvasKeyhandler: cubeScene=' + cubeScene); 
    console.log(event, event.keyCode, event.keyIdentifier); 

    /* 
    */ 
    } 
} 

どのように私はどちらかん：

A）はkeyhandler呼び出しでインスタンスを渡しますか？

私が試した：

(keydown)="canvasKeyHandler($event,{{dolly}})" 

B）コンパイル時thisにcanvasKeyHandler方法をバインド？

私が試した：

// bind the callback 'this' of the canvasKeyHandler to the definition-time 'this' 
VRScene.prototype.canvasKeyHandler.bind(this) 

と

canvasKeyHandler (event) { 
    ... 
}.bind(this) 

を私の謝罪これは明白な質問ですが、私はちょうど角2フレームワークを学習し、この時点では少し圧倒取得しています。 @Inputで何かする必要がありますか？

多くのおかげ

Answer 1

これは私にとってDIの微妙な点で実物レッスンでした。

基本的に、この問題はというユーザーエラーに起因する可能性があります。 angular2やタイプスクリプトが正しく動作しないと、煙煙の問題が発生していませんでした。私の主な問題は、コンストラクタ内で行うのではなく、initメソッドを使用してコンポーネントを初期化することでした。私は実行時まで知ることができないかもしれないと思ったプロパティの遅延結合を望んでいたので、これをやっていました。これは問題ありませんが、インジェクタが私のinitコードを駆動していないように見えます（あるいは、その時にプロパティが定義されていないかもしれません）。また、依存性注入の代わりに、継承を使用して親をサブクラス化するコンポーネントがあるという要因もありました。インジェクタは、親クラスのコンストラクタを駆動するだけで、子クラスのコンストラクタを駆動することはできないようですが、いくつかの問題が発生しているとは確信できません。

私は唯一のDIを使用して、コンストラクタ内のすべての初期化を置くために私のコードをリファクタリングし、全体的なだけでDIプロセスを制御について少しタイトであることの過程にいますよ。

同様の問題を持つ人のための主なテイクアウトは、コンポーネントが存在したり、作成される3つの潜在的な文脈があることを実現することである：コンパイル時、注入時、および実行時に。そこでもロード時かもしれないが、私は、これは射出時間と同じであると仮定しています。あなたは後半動的初期をやって、および/またはその代わりにDIの継承を使用している場合は、「通常」、それらはすべて同じだとあなたはそれらを区別する必要がありますが、ただ心の中で保管しないで注入されたコンポーネントのことあなたが期待するかなりの状態にないかもしれません。

Answer 2

(keydown)="canvasKeyHandler($event,{{dolly}})" 

が、これは実際にあなたの問題を修正場合、私は知らない

(keydown)="canvasKeyHandler($event,dolly)" 

する必要があります（実際に問題が何であるかを理解していない）

Answer 3

thisイベントハンドラ内のコンポーネントのインスタンスに対応します（canvasKeyHandler）。私は​​イベントのハンドラを設定するには、次を使用することは十分にあると思う：

(keydown)="canvasKeyHandler($event)" 

私はあなたがinitメソッド内dollyプロパティを初期化することがわかりました。しかし、私はこのメソッドが呼び出される場所を見ることができません。おそらくそれはあなたの問題の理由です...