Artikel yang menerangkan secara terperinci cara memindahkan data antara komponen ibu bapa dan anak Angular

Artikel ini akan membawa anda melalui kaedah pemindahan data antara komponen induk dan anak Angular (Komponen ini akan memperkenalkan kaedah pemindahan data komponen induk kepada komponen anak dan komponen anak yang memindahkan data ke komponen induk dalam Angular). ia akan berguna kepada semua orang!

环境:
Angular CLI: 11.0.6
Angular: 11.0.7
Node: 12.18.3
npm : 6.14.6
IDE: Visual Studio Code

Untuk memindahkan data antara komponen, perkara yang paling penting ialah memindahkan data antara komponen induk dan anak, contohnya:

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

Induk Komponen menghantar data kepada subkomponen Pada masa yang sama, apabila data subkomponen berubah, ia berharap untuk memberitahu komponen induk. Dalam

Angular, @Input() dan @Output() menyediakan cara untuk komponen kanak-kanak berkomunikasi dengan komponen induknya. @Input() membenarkan komponen induk mengemas kini data dalam komponen anak. Sebaliknya, @Output() membenarkan komponen anak menghantar data kepada komponen induk.

Ibu bapa kepada anak @Input()

1 Definisi komponen anak @Input()

Penghias @Input() dalam komponen anak menunjukkan bahawa harta itu boleh mendapatkan nilai daripada komponen induknya. [Tutorial berkaitan yang disyorkan: tutorial sudut, Pengajaran pengaturcaraan]

Contohnya:

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

• Tambah @Input ( ) Pembolehubah penghias, kecuali data boleh dihantar dari komponen induk, logik lain adalah sama seperti pembolehubah biasa

• Anda boleh menggunakan pembolehubah mesej dalam kod html bagi; komponen anak, contohnya:

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

2. Komponen induk menghantar pembolehubah kepada komponen anak

Apabila komponen induk memanggil komponen anak , anda boleh menghantar pembolehubah komponen induk (seperti messageToChild) kepada komponen anak

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

Dalam komponen anak, anda boleh menukar pembolehubah yang diluluskan message, tetapi skopnya hanya Dalam komponen anak, komponen induk tidak boleh mendapatkan hasil yang diubah. (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: Video Pengaturcaraan ! !

Atas ialah kandungan terperinci Artikel yang menerangkan secara terperinci cara memindahkan data antara komponen ibu bapa dan anak Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!