Pembelajaran sudut berbicara tentang komunikasi komponen dan siklus hidup komponen

Komunikasi komponen

1. Teruskan data ke komponen

<app-favorite [isFavorite]="true"></app-favorite>

// favorite.component.ts
impor { Masukan } dari '@angular/core';
kelas ekspor Komponen Favorit {
    @Input() isFavorit: boolean = false;
}

[Rekomendasi tutorial terkait: "tutorial sudut"]

Catatan: Menambahkan [] di luar atribut berarti mengikat nilai dinamis. Setelah menerimanya di komponen, itu adalah tipe Boolean. Tidak menambahkan [] berarti mengikat nilai normal itu di komponen, adalah字符串类型.

<app-favorite [is-Favorite]="true"></app-favorite>

impor { Input } dari '@angular/core';

kelas ekspor Komponen Favorit {
  @Input("adalah-Favorit") isFavorit: boolean = false
}

2. Komponen

perlu mentransfer data ke luar: meneruskan data ke komponen induk dengan mengklik tombol di sub-komponen

<!-- Templat sub-komponen-->
<button (click)="onClick()">klik</button>

// Impor kelas subkomponen { EventEmitter, Output } dari "@angular/core"

kelas ekspor Komponen Favorit {
  @Output() perubahan = EventEmitter baru()
  diKlik() {
    this.change.emit({ nama: "Zhang San" })
  }
}

<!-- Templat komponen induk -->
<app-favorite (change)="onChange($event)"></app-favorite>

// Kelas ekspor kelas komponen induk AppComponent {
  onChange(acara: { nama: string }) {
    konsol.log(acara)
  }
}

Siklus hidup komponen

1. Fase pemasangan

Fungsi siklus hidup fase pemasangan hanya dijalankan satu kali selama fase pemasangan dan tidak lagi dijalankan saat data diperbarui.

1). Konstruktor

Angular dijalankan saat membuat instance kelas komponen dan dapat digunakan untuk menerima objek instance layanan yang disuntikkan oleh Angular.

kelas ekspor Komponen Anak {
  konstruktor (tes pribadi: TestService) {
    console.log(ini.tes) // "tes"
  }
}

2), ngOnInit

dijalankan setelah menerima nilai atribut input untuk pertama kalinya, dan operasi yang diminta dapat dilakukan di sini.

<app-child name="Zhang San"></app-child>

kelas ekspor ChildComponent mengimplementasikan OnInit {
  @Input("nama") nama: string = ""
  ngOnInit() {
    console.log(nama ini) // "Zhang San"
  }
}

3), ngAfterContentInit

dipanggil setelah rendering awal proyeksi konten selesai.

<aplikasi-anak>
	<div #box>Halo Sudut</div>
</app-child>

kelas ekspor ChildComponent mengimplementasikan AfterContentInit {
  @ContentChild("kotak") kotak: ElementRef<HTMLDivElement> |

  ngAfterContentInit() {
    console.log(this.box) // <div>Halo Angular</div>
  }
}

4), ngAfterViewInit

dipanggil setelah tampilan komponen dirender.

<!-- templat komponen anak aplikasi -->
<p #p>aplikasi-anak berfungsi</p>

kelas ekspor ChildComponent mengimplementasikan AfterViewInit {
  @ViewChild("p") p: ElementRef<HTMLParagraphElement> |
  ngAfterViewInit () {
    console.log(this.p) // <p>aplikasi-anak berfungsi</p>
  }
}

2. Pembaruan fase

1), ngOnChanges

• dijalankan ketika nilai atribut input berubah, dan juga dieksekusi satu kali selama pengaturan awal. Urutannya lebih baik daripada ngOnInit.

• Tidak peduli berapa banyak atribut input yang berubah pada saat yang sama, fungsi hook akan hanya dieksekusi satu kali, dan nilai yang diubah akan disimpan pada saat yang sama. Dalam parameter,

• tipe

• parameternya adalah SimpleChanges dan tipe sub-propertinya adalah SimpleChange

• perubahan nilai

• Untuk tipe data referensi, dapat mendeteksi perubahan dari satu objek ke objek lainnya, namun deteksi tidak dapat. Perubahan nilai properti pada objek yang sama tidak mempengaruhi data pembaruan templat komponen.

Nilai tipe data dasar berubah

<app-child [name]="name" [age]="age"></app-child>
<button (klik)="change()">ubah</button>

ekspor kelas AppComponent {
  nama: string = "Zhang San";
  umur: angka = 20
  mengubah() {
    this.name = "李思"
    ini.usia = 30
  }
}

kelas ekspor ChildComponent mengimplementasikan OnChanges {
  @Input("nama") nama: string = ""
  @Input("usia") usia: angka = 0

  ngOnChanges(perubahan: SimpleChanges) {
    console.log("Perubahan nilai tipe data dasar dapat dideteksi")
  }
}

Perubahan tipe data referensi

<app-child [person]="person"></app-child>
<button (klik)="change()">ubah</button>

ekspor kelas AppComponent {
  orang = { nama: "张三", umur: 20 }
  mengubah() {
    this.orang = { nama: "李思", umur: 30 }
  }
}

kelas ekspor ChildComponent mengimplementasikan OnChanges {
  @Input("orang") orang = { nama: "", umur: 0 }

  ngOnChanges(perubahan: SimpleChanges) {
    console.log("Untuk tipe data referensi, hanya perubahan alamat referensi yang dapat dideteksi, perubahan atribut objek tidak dapat dideteksi")
  }
}

2), ngDoCheck: Terutama digunakan untuk debugging, selama atribut input berubah, apakah itu tipe data dasar, tipe data referensi, atau perubahan atribut dalam tipe data referensi, itu akan dieksekusi.

3), ngAfterContentChecked: Dieksekusi setelah pembaruan proyeksi konten selesai.

4), ngAfterViewChecked: Dieksekusi setelah tampilan komponen diperbarui.

3. Penghapusan instalasi fase

1), ngOnDestroy

dipanggil sebelum komponen dimusnahkan dan digunakan untuk operasi pembersihan.

kelas ekspor HomeComponent mengimplementasikan OnDestroy {
  ngOnDestroy() {
    console.log("Komponen telah dihapus")
  }
}