Дерекке компонентке деректер жіберу Angular-де

Қосымша компоненттен негізгі компонентке деректер жіберуге болады. Бұл арнайы объект EventEmitter және emit әдісі арқылы оқиғалар шығару арқылы жасалады. Қосымша компонент оқиғалар шығарады, оқиғамен бірге белгілі бір деректерді жібереді, ал негізгі компонент ол оқиғаларды ұстап, негізгі компоненттен деректерді алады.

Тәжірибеде көрейік. Ол үшін бізге бірнеше қадамдарды орындау керек. Алдымен қосымша компонентімізге @Output декораторын және EventEmitter класын импорттаймыз:

app/user/user.component.tsimport { Component, Output, EventEmitter } from '@angular/core';

Енді қосымша класта onData қасиетін жасаймыз, оның мәні жолды қамтитын жаңа EventEmitter объектісі болады:

app/user/user.component.tsexport class UserComponent {
  @Output()
  public onData = new EventEmitter<string>();
}

Енді send әдісін жасаймыз, оны шақыру onData оқиғасын берілген мәтінмен негізгі компонентке шығарады:

app/user/user.component.tsexport class UserComponent {
  @Output()
  public onData = new EventEmitter<string>();
  
  send() {
    this.onData.emit('xxx');
  }
}

Қосымша компоненттің үлгісінде send әдісін шақыратын батырманы жасаймыз:

app/user/user.component.html<button (click)="send()">
  send data
</button>

Негізгі компонентте onData әдісін жасаймыз, ол қосымша компоненттен сәйкес оқиға шығарылған кезде автоматты түрде шақырылады. Әдіс параметріне жіберілген деректер түседі:

app/app.component.tsexport class AppComponent {
  public onData(data: string) {
    console.log(data);
  }
}

Негізгі компоненттің үлгісінде қосымша компонент тегіне оқиғаны байлаймыз:

app/app.component.html<app-user (onData)="onData($event)"></app-user>