각도 4의 구성 요소 변경 감지

Question

구성 요소에서 작업 중이므로 구성 요소 내부에 변경 사항이 있는지 또는 변수가 변경되었는지 감지해야합니다. 뭔가 할거야 ... 가능하니? 그래서 내가 값을 기준으로하고 변경 사항이있을 것을, 내 구성 요소의 내부에 감지 할 필요가

public var1: boolean; 

public var2: string 

이 내 HTML

<component-boolean [(ngModel)]="var1"></component-boolean> 
<component-string[(ngModel)]="var2"></component-string> 

입니다 : 예를 들어

이 내 코드입니다 모든 변수의.

물론 변수의 양을 알 수 없으므로 모든 변수에 대한 변경 감지를 선언 할 필요가 없으며 동적이어야합니다.

this.booleanChanges.next(whatever); 

을 그리고 당신이 그렇게 당신의 HTML을 변경할 수 있습니다

@Output() booleanChanges: EventEmitter<string> = new EventEmitter(); 

뭔가 그냥 같은 이벤트를 방출 변경하는 경우 : 뭔가 구성 요소 내에서 변경하는 경우

Answer 1

당신은 출력에 이벤트가 :

<component-boolean [booleanChanges]="var1"></component-boolean> 

Answer 2

@Input 및과 양방향 바인딩이 필요합니다.. @Input으로 데이터가 자식으로 전달되는 반면 @Output은 부모에게 이벤트를 방출합니다.

우리는 만들 수 있습니다 @Output 변수가 @Input 변수 + 접미사 Change와 같은 이름을 가지고이 두, 결합 양방향을 결합

그래서 당신의 자식 태그를 표시 (중요!) :

@Input() bool: boolean; 
@Output() boolChange = new EventEmitter<boolean>(); 

하고이 값을 변경할 단지 EMI :

하고 component-boolean에

<component-boolean [(bool)]="var1"></component-boolean> 
<component-string [(str)]="var2"></component-string> 

그 변화와 부모는 그것을 잡을 것입니다!

this.bool = true; 
this.boolChange.emit(this.bool) 

다른 구성 요소와 비슷한 방식으로 구현하십시오.

당신이 양방향 결합을하지 않으려면, 당신은 @Output 및 트리거 이벤트에 대해 다른 이름을 가질 수 있습니다

@Output() boolHasChanged = new EventEmitter<boolean>(); 

this.boolHasChanged.emit(this.bool) 

아이 태그 :

<component-boolean [bool]="var1" 
        (boolHasChanged)="boolHasChanged($event)"> 
</component-boolean> 

부모 TS를 :

boolHasChanged(bool: boolean) { 
    console.log(bool) 
}