调用内部组件函数会抛出未定义的错误

时间:2016-10-19 01:07:42

标签: angular typescript

我试图使用this前缀在回调函数范围内调用组件内的内部函数。由于某种原因,这是一个未定义的函数错误。任何想法为什么会这样?提前谢谢!

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

    @Component({
      selector: 'page-login',
      templateUrl: 'login.html',
      providers: []
    })
    export class LoginPage {

      constructor() {
        console.log('construct called');
      }

      checkLoginStatus() {
         this.Service.getLoginStatus((response) => {
           if(response.status == 'connected') {
                this.printHelloWorld(); //throws undefined error
           }
         });
      }

      printHelloWorld() {
        console.log('hello world!');
      }
    }

1 个答案:

答案 0 :(得分:3)

这是因为this没有在回调函数范围内引用您的组件。您必须使用arrow function

     this.Service.getLoginStatus(response => {
       if(response.status == 'connected') {
            this.printHelloWorld(); //throws undefined error
       }
     });

bind()

     this.Service.getLoginStatus(function(response) {
       if(response.status == 'connected') {
            this.printHelloWorld(); //throws undefined error
       }
     }.bind(this));