Detaillierte Erläuterung der Kommunikation zwischen Angular-Eltern- und -Kindkomponenten

Exportschnittstelle Person {
  Name: Zeichenfolge;
  Alter: Anzahl;
  Geschlecht: Zeichenfolge;
}

importiere { Komponente, OnInit } von '@angular/core';
importiere { Person } von './person';
@Komponente({
  Selektor: ‚app-comp-parent‘,
  Vorlage: `
    <app-comp-untergeordnetes
      *ngFor="Person von Personenliste lassen"
      (itemClick)="beiItemClick($event)"
      [data]="Person"
    ></app-comp-child>
  `,
})
Exportklasse CompParentComponent implementiert OnInit {
  personList: Person[] = [
    { Name: '张三', Alter: 21, Geschlecht: '男' },
    { Name: 'Li Si', Alter: 25, Geschlecht: 'Männlich' },
    { Name: '李莉', Alter: 20, Geschlecht: '女' },
  ];
  Konstruktor(){ }
  ngOnInit(): void { }
  beiArtikelKlick(Artikel: Person){
    console.log('Klick-Person: ', Element);
  }
}

importiere { Komponente, EventEmitter, Eingabe, OnInit, Ausgabe } von '@angular/core';
importiere { Person } von './person';
@Komponente({
  Selektor: ‚app-comp-child‘,
  Vorlage: `
    <div (Klick)="itemClick.emit(Daten)">
      Name: {{ data.name }}
      Alter: {{ data.age }}
      Geschlecht: {{ data.sex }}
    </div>
  `,
})
Exportklasse CompChildComponent implementiert OnInit {
  @Input() Daten!: Person;
  @Output() itemClick = neuer EventEmitter();
  Konstruktor(){ }
  ngOnInit(): void { }
}