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>