Question

我一直遇到OnInit访问同一组件类中的函数的问题。

我的基本设置如下：

import {Component, OnInit} from '@angular/core';
...
export class AppComponent implements OnInit {

login(){...}

ngOnInit() {

    this.login(); //1

    document.onkeypress = function(e){
        if ( document.body === document.activeElement ) {
            this.login(); //2
        }

    };

1会按预期在页面加载时触发登录功能，但是2抱怨登录不是一个功能。如何在AppComponent中正确访问登录功能？

Answer 1

这与范围界定有关。您从this.login回调onkeypress致电this的时间是指全局对象，因此this.login等于window.login，在您的情况下未定义

可能的解决方案

缓存this

var _this = this;
document.onkeypress = function(e){
    if ( document.body === document.activeElement ) {
        _this.login(); //2
    }

};

使用.bind

明确设置上下文

document.onkeypress = function(e){
    if ( document.body === document.activeElement ) {
        this.login(); //2
    }

}.bind(this);

使用ES6箭头功能()=>{}

document.onkeypress = (e) => {
    if ( document.body === document.activeElement ) {
        this.login(); //2
    }

};

Angular2 - OnInit访问函数

1 个答案: