각도 2 : 콜백 결과를 구성 요소에 어떻게 반환 할 수 있습니까?

Question

저는 Angular 2와 콜백을 사용하여 결과를 반환하는 Google Api를 사용하여 응용 프로그램을 작성하고 있습니다.

구성 요소에 결과가 반환되지 않는 것 같습니다. Typescript가 'this'를 대신했으며 콜백 함수 컨텍스트에서 결과를 Component의 클래스 컨텍스트로 가져 오는 방법을 모르겠습니다.

@Component({ 
    selector: '...', 
    viewProviders: [...], 
    templateUrl: '...', 
    directives: [...], 
    providers: [...] 
}) 
export class TestComponent { 
    new google.visualization.Query('...') 
    .send(function handleResponse(response : any){ 
     let datatable = response.getDataTable(); 
     ... 
     results.push(item); 
     } 

     this.viewCollection = results; //this no longer refers to the TestComponent 
    }); 
... 
} 

Answer 1

당신은 "지방 화살표 ()=>"를 사용합니다. 그것은 EcmaScript6에 추가되었으며 다른 것들 사이에서 function 키워드를 대체합니다. 형식 위치에서 =>은 인수가 =>의 왼쪽에 있고 반환 유형이 오른쪽에있는 함수 유형을 정의합니다.

지방 화살표의 동기는 다음과 같습니다

1. 당신은

2. 그것은 전적으로이

의 의미를 캡처 (, 그것은 익명 될 것입니다 그래서) 입력 기능을 유지 할 필요가 없습니다

3. 그것은 전적으로 인수의 의미를 캡처

@Component({ 
    selector: '...', 
    viewProviders: [...], 
    templateUrl: '...', 
    directives: [...], 
    providers: [...] 
}) 
export class TestComponent { 
    new google.visualization.Query('...') 
    .send((response : any)=> { 
     let datatable = response.getDataTable(); 
     ... 
     results.push(item); 
     } 

     this.viewCollection = results; //this will refer to the TestComponent 
    }); 
... 
} 

당신이 당신의 대답 :

을 얻을 것이다 희망이 코드와 코드를 업데이트

Answer 2

당신이 컨텍스트를 유지하려면이, 지방 화살표 구문을 (사용) => {} 대신에 함수 표현식의 :

다음은 기본 예제 코드입니다. 여기

내가 화살표 구문을 사용하여 구성 요소를 다시 할 방법은 다음과 같습니다

export class TestComponent { 
 
     send() { 
 

 
     new google 
 
      .visualization.Query('...') 
 
      .send((response: any) => { 
 
      let datatable = response.getDataTable(); 
 
      response.forEach(item => { 
 
       results.push(item); 
 
      }); 
 
      this.viewCollection = results; 
 
      }); 
 
      
 

 
     }