예제를 통해 몇 분 안에 Angular EventEmitter, @Input, @Output 이해

요점에 대해 알아보겠습니다. Angular 문서는 각 기능에 대한 기본적인 이해를 제공하지만 실제 문제를 해결할 때 어떻게 함께 작동하는지 생각하게됩니다.

나는 그것을 보여주기 위해 한 가지 예를 작성했습니다.

문제 시나리오

한 코스에서 두 과목을 배워야 합니다. 각도 및 코드 샌드박스. Angular 주제에는 두 가지 학점을 제공하는 두 가지 작업이 있습니다. 코드 샌드박스에는 하나의 크레딧이 포함된 하나의 작업이 있습니다.
코스를 마치려면 3학점을 이수해야 합니다.

이제 진행 상황을 추적하는 애플리케이션을 작성해야 합니다.

큰 그림

+--------------------+
| Subjects           | : Keeping record of credits
|  +--------------+  |
|  | Tasks        |  | : To do list, tick off done tasks
|  | +---------+  |  |
|  | | Report  |  |  | : Keeping record of task completed
|  | +---------+  |  |
|  +--------------+  |
+--------------------+

추상 단계

기본 Angular 프로젝트 초기화

세 가지 구성 요소(제목, 작업, 보고서) 만들기

app.comopnent.html의 내용을 subjects 구성 요소

로 대체

기능 추가

코드

이 다이어그램을 사용하면 @Input , @Output 및 EventEmitter가 사용되는 위치를 시각화할 수 있습니다.

+----------+  Data Flow  +-----------+
|  Tasks   + ----------> + Subjects  |
+----------+             +-----------+
@Output():EventEmitter

+----------+  Data Flow  +----------+
|  Tasks   + ----------> +  Report  |
+----------+             +----------+
                         @Input():number

주제 구성 요소

<section id="subjects">
  <h4>Subjects</h4>
  <div *ngFor="let subject of subjects">
    <div>{{subject.desc}} - Credit: {{subject.credit}}</div>
  </div>
  <app-task
    (subjectCompleteEvent)="receiveSubjectCompletion($event)"
  ></app-task>
</section>

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-subject",
  templateUrl: "./subject.component.html"
})
export class SubjectComponent implements OnInit {
  subjects: any[] = [];

  ngOnInit(): void {
    this.subjects.push({ code: "ng", desc: "Angular", credit: 0 });
    this.subjects.push({ code: "sb", desc: "Code Sanbox", credit: 0 });
  }

  receiveSubjectCompletion(subjectComplete: any) {
    const index = this.subjects
      .map((subject) => {
        return subject.code;
      })
      .indexOf(subjectComplete.code);

    subjectComplete.credit
      ? this.subjects[index].credit++
      : this.subjects[index].credit--;
  }
}

작업 구성 요소

<section id="tasks">
  <h4>Tasks</h4>
  <div *ngFor="let task of todos">
    <input
      type="checkbox"
      (change)="onCheck($event)"
      value="{{task.code}}"
    />{{task.desc}}
  </div>
  <app-report [completed]="taskCompleteCounts"></app-report>
</section>

import { Component, OnInit, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "app-task",
  templateUrl: "./task.component.html"
})
export class TaskComponent implements OnInit {
  // define output type for notifying parent component
  @Output() subjectCompleteEvent: EventEmitter<any> = new EventEmitter<any>();
  // input value for report (child)
  taskCompleteCounts = 0;

  todos: any[] = [];
  ngOnInit(): void {
    this.todos.push({ code: "ng", desc: "Scaffold Angular Project" });
    this.todos.push({ code: "ng", desc: "Try EventEmitter, @Input, @Output" });
    this.todos.push({ code: "sb", desc: "Try Code Sandbox" });
  }

  onCheck(event: any) {
    if (event.target.checked) {
      // update value for child
      this.taskCompleteCounts++;
      // notify parent
      this.subjectCompleteEvent.emit({
        code: event.target.value,
        credit: true
      });
    } else {
      this.taskCompleteCounts--;
      this.subjectCompleteEvent.emit({
        code: event.target.value,
        credit: false
      });
    }
  }
}

보고서 구성 요소

<section id="report">
  <h4>Report</h4>
  <div>
    Task completed: {{completed}}
  </div>
</section>

import { Component, OnInit, Input } from "@angular/core";

@Component({
  selector: "app-report",
  templateUrl: "./report.component.html"
})
export class ReportComponent implements OnInit {
  // define input type. value will be updated from parent
  @Input() completed: number;
  ngOnInit(): void {}
}

데모

https://codesandbox.io/s/ng-eventemitter-input-output-57r1z


CC-BY-4.0 , 프로그램 코드 CC0 에 따라 이 콘텐츠를 자유롭게 사용할 수 있습니다.