如何在角度2事件处理程序中访问“this”?
发布时间:2020-12-17 10:23:35 所属栏目:安全 来源:网络整理
导读:在我的Component的keydown事件处理程序中,我需要通过以下方法修改组件的属性: canvasKeyHandler (event) { console.log('vrscene.canvasKeyHandler: event.keyCode=' + event.keyCode); console.log('vrscene.canvasKeyHandler: self.dolly' + this.dolly);
在我的Component的keydown事件处理程序中,我需要通过以下方法修改组件的属性:
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: <div class="container" id ="canvas-container-2"> <canvas id="vrruntime-view" class="camera-keypress-events" tabindex="1" (keydown)="canvasKeyHandler($event)" style="border: 1px solid black;" > </canvas> <!--camera-keypress-events [cubeScene]="cubeScene" --> </div> 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,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,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)将canvasKeyHandler方法绑定到编译时间吗? 我试过了: // bind the callback 'this' of the canvasKeyHandler to the definition-time 'this' VRScene.prototype.canvasKeyHandler.bind(this) 和 canvasKeyHandler (event) { ... }.bind(this) 如果这是一个显而易见的问题我很抱歉,但我只是在学习Angular 2框架并且在这一点上有点不知所措.我需要对@Input做些什么吗? 非常感谢 (keydown)="canvasKeyHandler($event,{{dolly}})" 应该 (keydown)="canvasKeyHandler($event,dolly)" 我不知道这是否真的解决了你的问题(不明白这个问题是什么) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |