Angular2에서 구성 요소 상호 작용을 구현하는 방법

이 글은 주로 Angular2에서 컴포넌트 상호작용을 구현하는 방법을 소개합니다. Angular2에서 컴포넌트 상호작용에 관련된 조작 기술과 주의사항을 예제 형식으로 요약하고 분석합니다. 필요한 친구들이 참고할 수 있습니다

이 글의 예시는 설명합니다. Angular2에서 컴포넌트 상호작용을 구현하는 방법. 다음과 같이 참조할 수 있도록 모든 사람과 공유하세요.

머리말

Angular 개발에서는 종종 자체 부서에서 개발한 구성 요소를 참조하는 등 구성 요소 간의 상호 작용이 포함됩니다.
때때로 일부 데이터를 바인딩해야 하는 경우도 있습니다. 또는 일부 데이터를 출력하려면 참조된 하위 구성 요소가 필요합니다. 이때 구성 요소 간의 상호 작용을 처리해야 합니다. 여기서 하위 구성 요소의 @Input은 나중에 상위 구성 요소가 하위 구성 요소를 도입할 때 하위 구성 요소 태그에 Hero를 써야 함을 나타냅니다. 동시에 자체 구성 요소의 Hero에 값을 할당하면 바인딩이 실현됩니다. 상위 구성요소 데이터를 하위 구성요소에 전달합니다. 상위 구성요소는 하위 구성요소의 이벤트를 수신하여 상위 구성요소에 부울 값을 전달합니다. 하위 구성 요소의 메서드를 자체 메서드에 바인딩하여 하위 구성 요소를 모니터링하는 효과

입력 속성을 가로채는 setter 값 변경Sub 구성 요소

<h3>{{hero.name}} says:</h3>
@Input() hero: Hero;

상위 구성 요소

<hero-child [hero]="myhero" ></hero-child>
myhero = "Mr.IQ";

상위 구성 요소가 하위 구성 요소를 참조한 후, 데이터를 하위 구성요소에 바인딩하고, 하위 구성요소는 set 및 get

Parent 구성요소와 하위 구성요소가 로컬 변수를 통해 상호 작용

Sub-comComponent

<button (click)="vote(true)" >Agree</button>
@Output() onVoted = new EventEmitter<boolean>();
vote(agreed: boolean) { this.onVoted.emit(agreed);}

Parent 구성요소

<my-voter (myonVoted)="onVoted($event)"></my-voter>
myonVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; }

를 통해 상위 구성요소가 전달한 데이터를 수정하고 표시합니다. 하위 구성 요소는 변수와 메소드를 정의합니다. 상위 구성 요소는 하위 구성 요소 태그를 참조한 후 태그에 로컬 변수를 설정하여 하위 구성 요소를 나타내고, 변수를 사용하여 해당 하위 구성 요소의 변수와 메소드에 액세스할 수 있습니다. 하위 구성 요소

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Angular에서 orderBy 정렬 및 퍼지 쿼리를 구현하는 방법

vue vuex vue-rouert 권한 라우팅(자세한 튜토리얼)

Javascript에서 키보드의 키 코드를 얻는 방법

위 내용은 Angular2에서 구성 요소 상호 작용을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!