angular eventemitter 예제

EventEmitter가 어떻게 작동하는지 자세히 설명하기 전에 아래 코드 예제를 검토하십시오. 아래 목록과 같이 단추를 통해 ChildComponent 수정: 이러한 데코레이터 는 모두 @angular/코어의 일부입니다. 이 예제에서는 괜찮지만 중첩 된 구성 요소가있는 경우 실망 스러울 수 있습니다. @Output EventEmitter가 어떻게 더 유용할 수 있는지 실시간 예제를 살펴보겠습니다. AppComponent이 아래 이미지와 같이 표 형식 형식으로 제품 목록을 렌더링하고 있다고 생각하십시오. 여기에 2 구성 요소를 만들었습니다, 안녕하세요 구성 요소는 응용 프로그램 구성 요소 내부에 중첩. hello 구성 요소에는 입력이 있고 출력 두 데코레이터는 서로 관련된 구성 요소 간에 작동합니다. 예를 들어 AppComponent이라는 다른 구성 요소 내에서 ChildComponent이라는 구성 요소를 사용하는 경우 서로 관련이 있습니다. 아래 이미지에서 이를 확인할 수 있으며, @Input 데코레이터로 장식된 모든 ChildComponent 속성은 AppComponent에서 데이터를 수신할 수 있습니다.

이렇게 하려면 AppChildComponent에서 단추 클릭 이벤트를 내보전해야 합니다. @angular/코어에서 EventEmitter 및 출력을 가져옵니다. 그것은 이론에 대 한. 예제를 살펴보겠습니다. 바라건대 이 두 가지 간단한 예가 EventEmitter의 적절한 사용을 명확히 할 것입니다. 이것이 각 성 구성 요소의 기본 구성 입니다. 응용 프로그램에서 이해할 수 있는 특정 정의가 있는 클래스 파일일 뿐입니다. 이 정보를 통해 이 예제에서 몇 가지 구성 요소를 생성하고 각도 구성 요소가 가지고 있는 몇 가지 기능을 살펴보겠습니다.

이를 통해 예제에서 ng serve를 실행하고 사이드바를 사용하여 부모 구성 요소로 라우팅할 수 있어야 합니다. 단순히 구성 요소에서 이벤트를 내보사하는 데 사용합니다. 다음 예제를 살펴보십시오. 이제 이 예제에서는 스타일이 추가된 경우 다음과 같이 표시됩니다. EventEmitter는 angular2 추상화이며 유일한 목적은 구성 요소에서 이벤트를 내포하는 것입니다. 롭 Wormald 가져오기 {구성 요소, OnInit, 입력 }에서 코멘트를 인용 `@angular/코어`; 각도에서 구성 요소는 @Output 및 EventEmitter를 사용하여 이벤트를 내보사할 수 있습니다. 둘 다 @angular/코어의 일부입니다. 아니요, 수동으로 구독하지 말고 서비스에서 사용하지 마십시오. 설명서에 표시된 대로 사용하여 구성 요소에서 이벤트를 내보전할 수 있습니다. 각의 추상화를 물리치지 마십시오. 이벤트 미터터는 주제이기 때문에, 우리는 모든 Rx 의 장점을 사용할 수 있습니다. 예를 들어 값이 있는 경우에만 이벤트를 내보려고 합니다.

내 예제 리포지토리에서 구성 요소상호 모듈을 만들려고 합니다. 모듈에 부모 구성 요소와 하위 구성 요소의 두 가지 구성 요소를 추가합니다. 이 이름은 각도에 특별한 아니다, 난 그냥 데모를 위해 그들을 사용하고 있습니다. 부모 구성 요소에 데이터가있는 두 개의 모의 자식 개체를 만들려고합니다. 한 하위 를 ChildComponent의 한 인스턴스에 전달하고 다른 자식은 두 번째 인스턴스로 전달합니다.

This entry was posted in Uncategorized by admin. Bookmark the permalink.

Comments are closed.