하위 구성 요소는 부모 구성 요소의 메서드를 호출하고 값

HTML

<tr 
    [onTotalWeights]="totalWeights" 
    >

코드

totalWeights(): number { 
    return // Get sum of fields over the whole array 
    }

아이

0123을 반환

@Input() onTotalWeights:() => number; 

    canApplyChanges() { 
    return this.onTotalWeights() <= 100 && this.form.valid; 
    }

자식에서 부모에 대한 메서드를 호출하고 값을 반환하려고합니다.

현재 문제는 this.onTotalWeights()가 "this"키워드라고 불리는 경우 자식 구성 요소 내부의 메서드/변수를 나타내며 부모 구성 요소는 참조하지 않습니다. 어떻게 든 totalWeights 함수를 전달할 때 컨텍스트가 손실됩니다.

어떻게 해결할 수 있습니까?

출처

2017-05-07 Pascal

정상적인 JS 동작입니다. 당신은 내가 또한 바인딩을 사용하여 생각 .bind()

totalWeights(): number { ... } 

totalWeightsFn = this.totalWeights.bind(this);

[onTotalWeights]="totalWeightsFn"

출처

2017-05-07 16:38:56

를 호출하여 사용자 정의 할 수 있습니다하지만이를 읽고 : http://stackoverflow.com/questions/38102948/how-to-return-a- value-from-an eventemitter-function이 솔루션은 손실 된 컨텍스트를 언급하지만 컨텍스트 문제에 대한 바인드 솔루션을 제공하지 않거나 볼 수 없습니다. – Pascal

화살표 기능을 사용합니다. 화살표 함수'() => {}'를 사용하는 것도 같은 방법입니다. 클로저를 넘기 위해서, 화살표 함수는 일반적으로 함수 참조를 전달할 때 더 편리합니다.'.bind()'는 보통 someObject.someCallback ((x) => this.foo와 같은 매개 변수를 반복 할 필요가 없으므로 더 편리합니다. x))''someObject.someCallbacl (this.foo.bind (this))'대신에. –

하위 구성 요소는 부모 구성 요소의 메서드를 호출하고 값

답변

관련 문제