각도 2 : 구성 요소의 특성을 변경하는 특성 변경을 어떻게 검색합니까?

Question

나는이처럼 보이는 각도 2 컨트롤러있어 :

@Component({ 
    selector: 'my-component', 
    template: '<div>The value is: {{ value }}</div>', 
}) 
class MyComponent implements OnInit { 
    @Input() 
    value: string; 

    @Output 
    valueChange = new EventEmitter<number>(); 

    ngOnInit() { 
    this.valueChange.subscribe(value => { 
     console.log('new value:', value); // <-- does not get triggered 
    }); 
    } 
} 

을하지만 템플릿에서 value 값이 변경 바인딩 때

<my-component [value]="someValue" /> <!-- valueChange not triggered! --> 

가 valueChange 이벤트가 너무 트리거되지 않습니다, 템플릿이 올바르게 업데이트되고 새 값이 표시 되더라도 구성 요소는 변경되었음을 알 수 없습니다.

컨트롤러의 입력 속성이 변경되면 어떻게 감지합니까?

Answer 1

나는 OnChanges에서 구현하여 문제를 해결 할 수있었습니다 :

ngOnChanges(changes) { 
    for (let key in changes) { 
    if (this[key + 'Change']) 
     this[key + 'Change'].emit(changes[key].currentValue); 
    } 
} 

이 어떤 자동으로 각도가 변화를 감지 할 때마다 Change 이벤트를 트리거합니다 ...하지만 기본적으로이 작업을 수행 할 수있는 방법은 무엇입니까? 제 생각에는

Answer 2

이 Output 필요한 경우 그들의보기를 업데이트 할 수 있도록 다른 사람에게 이벤트를 방출하는 구성 요소입니다, 그것은 단지 (따라서 이름 Output)를 밖으로 방송 할 필요가 내부적으로 변경을 위해 사용되어야한다. 이벤트를 트리거하면 Input 변경으로 예기치 않은 동작이 발생할 수 있습니다. 이제는 내부 및 외부의 모든 변경 사항에 대해 valueChange이 트리거되고 실제로는 Output이 아닌 것처럼 예상치 못한 동작이 발생할 수 있습니다. 귀하의 경우에는

, 당신이 당신의 value 변경, 당신이 그것을 세터 할 수있을 때 물건을 수행하려는 경우 : I는 입력 변수가 수정되었을 때 검출하기 위해 setter를 사용했습니다

private _value: string; 
get value(): string { 
    return this._value; 
} 

@Input('value') 
set value(val: string) { 
    this._value = val; 
    console.log('new value:', value); // <-- do your logic here! 
} 

Answer 3

. 당신이 그렇게 같은 일을 얻을 수있는 @Component 장식 대신 @Input 선언에서 inputs 키를 사용해야합니다 :

@Component({ 
    selector: 'my-component', 
    template: '<div>The value is: {{ value }}</div>', 
    inputs: ['value'] 
}) 
class MyComponent { 
    private _value: string; 

    @Output 
    valueChange = new EventEmitter<number>(); 

    set value(value) { 
    this._value = value; 
    console.log('new value:', value); 
    this.valueChange.emit(value); 
    } 

    get value(value) { 
    return this._value; 
    } 
} 

또한 참고로, 클래스 메소드는 ngOnInit 대신 onInit입니다.