올바른 컨텍스트에서 각도 실행 된 전달 된 메서드 참조

진행 단추로 작동하는 구성 요소 si-button을 만들었습니다 (클릭하면로드 표시기가 표시됨).올바른 컨텍스트에서 각도 실행 된 전달 된 메서드 참조

<si-button [pb-click]="register">Register</si-button>

register 방법은 약속을 반환하고 로딩 인디케이터가 약속 ISN '만큼 도시되어

나는 방법에 대한 참조는이 같은 si-button 컴포넌트가 클릭 실행 패스 해결 됐어. SIButtonComponent 클래스에서 버튼을 클릭하면 register 메서드가 실행됩니다.

SIButtonComponent

export class SIButtonComponent{ 
    ... 

    @Input('pb-click') pbClick :() => Promise<any> = null; 

    handleClick($event){ 
     this.loading = true; 

     this.pbClick().then(() => { 
      this.showSuccess(); 
     }, (data) => { 
      this.showError(); 
     }); 
    } 

    ... 
}

RegisterComponent : 방법 register가 SIButtonComponent 인스턴스에서 실행되기 때문에

는

export class RegisterComponent{ 
    register() : Promise<any> { 
     return new Promise((resolve, reject) => { 
      this.auth.register(this.email, this.password).subscribe((org : Organization) => { 
       resolve(); 
      }, (error : ErrorResponse) => { 
       reject(); 
      }); 
     }); 
    } 
}

문제 , this는 SIButtonComponent 인스턴스보다는 RegisterComponent을 말한다. 이 작업을 어떻게 올바르게 수행해야합니까? pb-click 매개 변수에 @Input 대신 @Output을 사용하는 것이 더 효과적 일 수 있습니다. 그러나 클릭 이벤트가 발생한 후 어떻게하면 Promise -instance를 얻을 수 있는지 알 수 없습니다.

export class RegisterComponent { 
    registerFunction =() => this.register(); 
    ... 
} 

<si-button [pb-click]="registerFunction">Register</si-button>

출처

2017-04-01 Anton Gildebrand

대신 화살표 함수를 통과? 뒤에있는 메 커닉을 이해하고 싶습니다. 고마워요!

출처

2017-04-01 11:08:34

이 잘 작동하지만, 이유 : –

화살표 함수가 'this'에 바인딩되어 있기 때문입니다. 이것이 왜 존재 하는지를 보여주는 주된 이유입니다. 이것은'function() {return this.register();와 같습니다. } .bind (this)'. –

굉장합니다, 고마워요! –

올바른 컨텍스트에서 각도 실행 된 전달 된 메서드 참조

답변

관련 문제