Mari kita bincangkan tentang cara memindahkan data antara komponen ibu bapa dan anak dalam Angular

Bagaimana untuk memindahkan data antara komponen ibu bapa dan anak dalam Angular? Artikel berikut akan memperkenalkan kepada anda kaedah dalam Angular di mana komponen induk menghantar data ke komponen anak dan komponen anak menghantar data ke komponen induk saya harap ia akan membantu anda!

Persekitaran:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Nod: 12.18.3
• npm: 6.14.6
• IDE: Visual Studio Code

Pindahkan data antara komponen, perkara yang paling penting Ia adalah untuk memindahkan data antara komponen induk dan anak, contohnya:

<parent-component>
  <child-component></child-component>
</parent-component>

Komponen induk menghantar data kepada komponen anak Pada masa yang sama, apabila data komponen anak berubah, diharapkan komponen induk boleh dimaklumkan.

Dalam Angular, @Input() dan @Output() menyediakan cara untuk komponen anak berkomunikasi dengan komponen induknya. @Input() membenarkan komponen induk mengemas kini data dalam komponen anak. Sebaliknya, @Output() membenarkan komponen anak menghantar data kepada komponen induk. [Cadangan tutorial berkaitan: "tutorial sudut"]

Bapa kepada anak lelaki @Input()

1 Definisi komponen @Input()

Penghias @Input() dalam komponen anak menunjukkan bahawa harta itu boleh mendapatkan nilai daripada komponen induknya.

Contohnya:

export class ChildComponent {
  @Input() message: string;
}

• Tambahkan pembolehubah @Input() penghias Kecuali data itu boleh dihantar dari komponen induk, logik lain ialah sama seperti pembolehubah biasa; Dalam kod html subkomponen

• , anda boleh menggunakan pembolehubah mesej, contohnya:

<p>
  Parent says: {{message}}
</p>

2 . Komponen induk menghantar pembolehubah kepada komponen anak

Apabila komponen induk memanggil komponen anak, pembolehubah komponen induk (seperti messageToChild) boleh. diserahkan kepada komponen anak

<child-component [message]="messageToChild"></child-component>

Dalam subkomponen

, anda boleh menukar pembolehubah yang diluluskan dalam message, tetapi skopnya hanya dalam subkomponen dan komponen induk tidak boleh mendapatkan hasil yang berubah. (Cara untuk menghantarnya kepada komponen induk, sila baca terus)

Kanak-kanak menghantarnya kepada induk @Output()

Angular menggunakan peristiwa untuk memberitahu komponen induk data perubahan. Komponen induk perlu melanggan acara ini.

1. Definisi subkomponen @Output

Takrifan subkomponen @Output

export class ChildComponent {

  // EventEmitter ，这意味着它是一个事件
  // new EventEmitter<string>() - 
  // 使用 Angular 来创建一个新的事件发射器，它发出的数据是 string 类型的。
  @Output() newItemEvent = new EventEmitter<string>();

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

subkomponen apabila data berlaku Apabila menukar, hanya panggil kaedah addNewItem ini. Contohnya, dalam HTML

<label>Add an item: <input #newItem></label>
<button (click)="addNewItem(newItem.value)">Add to parent&#39;s list</button>

2. Komponen induk melanggan acara

1. Dalam kod ts komponen induk, tambahkan pengendali di atas kaedah Acara, seperti

addItem(newItem: string) {
    // logic here
}

2. Dalam html komponen induk, langgan acara tersebut.

<child-component (newItemEvent)="addItem($event)"></child-component>

Ikatan peristiwa (newItemEvent)='addItem($event)' akan menyambungkan acara newItemEvent dalam komponen anak kepada kaedah addItem() komponen induk.

Ringkasan

• Menggunakan @Input() dan @Output() boleh merealisasikan pemindahan dan perkongsian data antara komponen ibu bapa dan anak dengan mudah.

• Anda boleh menggunakan @Input() dan @Output() pada masa yang sama

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pembelajaran Pengaturcaraan ! !

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara memindahkan data antara komponen ibu bapa dan anak dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!