angular output 예제

가져오기 { 구성 요소, OnInit, 입력 } 에서 `@angular/코어`; 이렇게 하면 Angular이 이 속성을 출력 바인딩으로 처리하도록 알리는 데 필요한 메타데이터가 구성됩니다. 그러나 EventEmitter라는 것과 함께 앉아있어야합니다. 이 문서와 시리즈의 다른 문서에 대한 코드는 angular2 샘플 리포지토리에서와 같이 사용할 수 있습니다. http://angular2-samples.azurewebsites.net/ 에서 실행되는 샘플도 볼 수 있습니다. Github: https://github.com/orange-bees/angular-concepts-tutorials 내 예를 확인하십시오. 특히 TypeScript는 선언적으로 기존 „사물”에 추가하거나 변경하는 데 사용되는 데코레이터(„주석”이라고도 함)를 지원합니다. 예를 들어 클래스 데코레이터는 클래스의 생성자 함수에 메타데이터를 추가하거나 클래스의 작동 방식을 변경할 수도 있습니다. 데코레이터 및 데코레이터로 수행할 수 있는 작업의 유형에 대한 자세한 내용은 JavaScript 데코레이터에 대한 제안을 참조하세요. 각도 2는 여러 데코레이터를 포함한다. 그것은 이론에 대 한.

예제를 살펴보겠습니다. 이렇게 하려면 AppChildComponent에서 단추 클릭 이벤트를 내보전해야 합니다. @angular/코어에서 EventEmitter 및 출력을 가져옵니다. 두 데코레이터는 서로 관련된 경우 구성 요소 간에 작동합니다. 예를 들어 AppComponent이라는 다른 구성 요소 내에서 ChildComponent이라는 구성 요소를 사용하는 경우 서로 관련이 있습니다. 아래 이미지에서 이를 확인할 수 있으며, @Input 데코레이터로 장식된 모든 ChildComponent 속성은 AppComponent에서 데이터를 수신할 수 있습니다. 이 방법을 사용하는 방법의 간단한 예로는 테이블 구성 요소에 각 고객을 나타내는 여러 개별 행 구성 요소가 포함된 고객 및 해당 행이 포함된 테이블입니다. 테이블 구성 요소는 모든 고객을 포함하는 레코드 집합을 관리하고 개별 고객의 데이터를 포함된 각 행 구성 요소에 전달할 수 있습니다.

이 예제를 확인하십시오. 여기에 2 구성 요소를 만들었습니다, 안녕하세요 구성 요소는 응용 프로그램 구성 요소 내부에 중첩. hello 구성 요소에는 입력이 있으며 이러한 데코레이터 모두 @angular/코어의 일부입니다. @Output EventEmitter가 어떻게 더 유용할 수 있는지 실시간 예제를 살펴보겠습니다. AppComponent이 아래 이미지와 같이 표 형식 형식으로 제품 목록을 렌더링하고 있음을 고려하십시오: Angular를 사용하는 사람들에게 입력 및 출력 데코레이터는 특히 예제 코드를 보고 연구할 때 약간 혼란스럽습니다. 이 기사에서는 가장 간단한 방법으로 설명하려고 노력할 것입니다. 그림 1: @Component 데코레이터 그림 2에서 „입력” 및 „출력” 속성을 사용하는 구성 요소: 이 구성 요소는 ParentComp에 의해 정의된 입력 및 출력을 사용합니다. 구성 요소의 입력 속성 및 출력 이벤트를 정의하는 데 사용할 수 있습니다.