Angular의 구성 요소 상호 작용

안녕하세요 여러분, 저는 Angular에 대한 첫 번째 블로그를 작성하고 있습니다. 아시다시피 Angular는 모듈 구성 요소 기반의 프런트엔드 프레임워크입니다.

이 튜토리얼을 통해 Angular의 구성 요소 간에 다른 방식으로 데이터를 공유하는 방법을 배울 수 있습니다. 나는 당신이 쉽게 이해할 수 있도록 그런 방법을 제공하고 있습니다.

상위 구성 요소에서 하위 구성 요소로의 통신(입력 데코레이터)

자식 구성 요소에서 부모 구성 요소로의 통신(ViewChild 데코레이터)

하위 구성 요소에서 상위 구성 요소로의 통신(출력/EventEmitter 데코레이터)

형제 구성 요소를 통한 통신(서비스로)

**

부모 구성 요소에서 자식 구성 요소로의 통신(입력 데코레이터)

**
데이터 바인딩이 있는 템플릿을 통해 데이터를 전달할 수 있는 입력 데코레이터를 통해 데이터 공유를 도입하는 가장 일반적인 방법입니다. 여기에서 부모 구성 요소를 통해 자식 구성 요소로 데이터 목록을 공유합니다. 이런 식으로 데이터 목록을 보여주고 있습니다.

parent.component.ts

@Component({
  selector: 'app-parent',
  template: `<app-child [data]="dataList"></app-child>`,
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
  public dataList: ParentDataList[] = PARENT_DATA_LIST;
  constructor() { }
  ngOnInit(): void {
  }
}

child.component.ts

@Component({
  selector: 'app-child',
  template: `<div class="table-responsive">
  <table class="table">
    <tr>
      <th>Id</th>
      <th>User ID</th>
      <th>Title</th>
      <th>Body</th>
    </tr>
    <tr *ngFor="let item of data">
      <td>{{item.id}}</td>
      <td>{{item.userId}}</td>
      <td>{{item.title}}</td>
      <td>{{item.body}}</td>
    </tr>
  </table>
</div>`,
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  @Input() data!: ParentDataList[];
  constructor() { }
  ngOnInit(): void {
  }
}

**

하위 구성 요소에서 상위 구성 요소로의 통신(ViewChild 데코레이터)

**
ViewChild 데코레이터를 사용하면 자식 구성 요소를 통해 부모 구성 요소로 데이터를 전달할 수 있습니다. ViewChild를 부모 구성 요소에 주입하면 변수와 함수를 사용하여 부모에 액세스할 수 있으므로 요구 사항에 따라 사용할 수 있습니다. 이 방법을 통해 목록을 추가하려고 합니다.

parent.component.ts

@Component({
  selector: 'app-parent',
  template: `<button class="primary-btn" (click)="addList()">Add List</button>
<app-child></app-child>`,
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit, AfterViewInit {
  @ViewChild(ChildComponent) child!: ChildComponent;
  constructor() { }
  ngOnInit(): void {
  }
  addList(){
     let obj = {
        id: 1,
        userId: 123,
        title: 'ankit',
        body:'every thing mcm complrter'
      }
     this.child.arrList = [...this.child.arrList, obj];
  }
  ngAfterViewInit(){
    this.child.showList(true);
  }
}

child.component.ts

@Component({
  selector: 'app-child',
  template: `<table *ngIf="collapseList" class="table">
  <tr *ngFor="let item of arrList;let i=index;">
    <td>{{item.id}}{{i}}</td>
    <td>{{item.userId}}{{i}}</td>
    <td>{{item.title}}{{i}}</td>
    <td>{{item.body}}{{i}}</td>
  </tr>
</table>`,
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  public collapseList!: boolean
  public arrList:DataList[] = [];
  constructor() { }
  ngOnInit(): void {}
  showList(value:any){
    this.collapseList = value;
  }
}

**

자식 구성 요소에서 부모 구성 요소로의 통신(출력/EventEmitter 데코레이터)

**

출력 데코레이터, 이는 자식 구성 요소에서 부모 구성 요소로 데이터를 내보낼 때와 같이 이벤트 이미터를 통해 자식 구성 요소에서 부모 구성 요소로 데이터를 공유하는 또 다른 방법입니다. 각도에서 이벤트 바인딩처럼 작동합니다. 변경, 클릭 등과 같은 이러한 방식으로 발생하는 모든 유형의 이벤트에 대한 데이터를 공유할 수 있습니다. 저는 이러한 방식으로 작은 덧셈/곱셈/뺄셈/나누기 기능을 만듭니다.

parent.component.ts

@Component({
  selector: 'app-parent',
  template: `<div class="row">
  <div class="col-md-2">
    <input #text1 (change)="text1Data(text1.value)" type="number" value="0" class="form-control">
  </div>
  <div class="col-1">
    <h2 class="ak-title-lg">{{optSymbal}}</h2>
  </div>
  <div class="col-md-2">
    <input #text2 (change)="text2Data(text2.value)" type="number" value="0" class="form-control">
  </div>
  <div class="col-md-1">
    <p class="ak-title">=</p>
  </div>
  <div class="col-md-3">
    <input type="text" class="form-control" [value]="result" disabled>
  </div>
</div>
<app-child (btnClick)="operationClick($event)"></app-child>`,
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
  public inputValue1: number = 0;
  public inputValue2: number = 0;
  public result: number = 0;
  public optSymbal:any;
  constructor() {}
  text2Data(value: number) {
    this.inputValue2 = value;
  }
  text1Data(value: number) {
    this.inputValue1 = value;
  }
  ngOnInit(): void {}
  operationClick($event: any) {
    this.optSymbal = $event;
    switch ($event) {
      case OPERATION.addition:
        this.result = this.inputValue1 + this.inputValue2;
        break;
      case OPERATION.subtract:
        this.result = this.inputValue1 - this.inputValue2;
        break;
      case OPERATION.multiply:
        this.result = this.inputValue1 * this.inputValue2;
        break;
      case OPERATION.division:
        this.result = this.inputValue1 / this.inputValue2;
        break;
      default:
        break;
    }
  }
}

child.component.ts

@Component({
  selector: 'app-child',
  template: `<table class="table">
  <tr class="row">
    <td class="col-md-3 col-6" *ngFor="let item of btnArr;let i=index;">
      <button class="primary-btn" (click)="changeData(item.opt)">{{item.title}}</button>
    </td>
  </tr>
</table>`,
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  @Output() btnClick:EventEmitter<any> = new EventEmitter();
  btnArr = BTN_OPERATION_ARR;
  constructor() { }
  ngOnInit(): void {
  }
  changeData(value:string){
    this.btnClick.emit(value);
  }
}

**

형제 구성 요소를 통한 통신(서비스로)

**

이러한 방식으로 RxJS, get/set 메서드 및 기타 방법을 통해 여러 시나리오를 사용할 수 있습니다. 여기서는 getter/setter 메서드를 통해 설명하고 있으며 RxJS BehaviorSubject는 다음 블로그에서 논의할 것입니다. 그래서 서비스 방식으로 데이터를 보여주거나 숨기려고 합니다.

형제1.component.ts

@Component({
  selector: 'app-sibling1',
  template: `<p>sibling1 works!</p>
<h2 class="ak-title">This is a <span [ngClass]="{'true': show_flag, 'false': !show_flag}">{{show_flag ? 'True':'False'}}</span> condition</h2>
<a class="primary-btn" routerLink="child">Go to child >>></a>`,
  styleUrls: ['./sibling1.component.scss']
})
export class Sibling1Component implements OnInit {
  show_flag:any;
  constructor(private dataService: DataService) { }
  ngOnInit() {
    this.getData()
  }
  getData(){
    this.show_flag = this.dataService.getData();
  }
}

sister2.component.ts

@Component({
  selector: 'app-sibling2',
  template: `<button class="primary-btn" routerLink="/">Back</button>
<app-contact [data]="contactData"></app-contact>
<p>child works!</p>
<button class="secondary-btn" (click)="changeCondition()">Change Condition</button><br><br>
<a class="primary-btn" routerLink="/service-based"> <<< Go to Parent</a>`,
  styleUrls: ['./sibling2.component.scss']
})
export class Sibling2Component implements OnInit {
  contactData = CONTACT_HEADER;
  constructor(private dataService: DataService) { }
  changeValue:any;
  ngOnInit() {
    this.changeValue = this.dataService.getData();
  }
  changeCondition(){
    this.changeValue = !this.changeValue;
    this.dataService.setData(this.changeValue);
    alert('Done, Now click on Go to Parent');
  }
}

data.service.ts

@Injectable({
  providedIn: 'root'
})
export class DataService {
  public isEnable: boolean = false;
  constructor() { }
  // we are communication data between two component via service -- getter/setter method
  //-----------------------------------------------------------
  // setter method
  setData(data:any){
    this.isEnable = data;
  }
  // getter method
  getData(){
    return this.isEnable;
  }
}

질문이나 의문 사항이 있는 경우 빠른 의견 추가를 통해 질문을 해결하도록 노력하겠습니다.

GitHub Source Code
Demo

https://www.ankitkumarsharma.com/

또한 GitHub , , Medium 에서 저를 팔로우하고 코드 쿼리에 대한 자세한 기사 업데이트를 확인하십시오.