Pembelajaran sudut bercakap tentang komunikasi komponen dan kitaran hayat komponen

Artikel ini akan membawa anda melalui komunikasi komponen dan kitaran hayat komponen dalam sudut Ia akan memperkenalkan secara ringkas kaedah pemindahan data ke bahagian dalam komponen dan kaedah pemindahan data ke luar. Saya harap ia akan membantu semua orang!

Komunikasi Komponen

---

1 🎜 >

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

[Cadangan tutorial berkaitan: "

// favorite.component.ts
import { Input } from '@angular/core';
export class FavoriteComponent {
    @Input() isFavorite: boolean = false;
}

tutorial sudut

"]Nota: Tambahkan

di luar atribut untuk menunjukkan pengikatan dinamik value , selepas diterima dalam komponen, ia adalah jenis Boolean Tanpa

, ia bermakna mengikat nilai normal Selepas diterima dalam komponen, ia adalah []. []字符串类型

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

import { Input } from '@angular/core';

export class FavoriteComponent {
  @Input("is-Favorite") isFavorite: boolean = false
}

2. Komponen memindahkan data ke luar Keperluan: Hantar data ke sub-komponen dengan mengklik butang butang Komponen induk

<!-- 子组件模板 -->
<button (click)="onClick()">click</button>

// 子组件类
import { EventEmitter, Output } from "@angular/core"

export class FavoriteComponent {
  @Output() change = new EventEmitter()
  onClick() {
    this.change.emit({ name: "张三" })
  }
}

<!-- 父组件模板 -->
<app-favorite (change)="onChange($event)"></app-favorite>

// 父组件类
export class AppComponent {
  onChange(event: { name: string }) {
    console.log(event)
  }
}

Kitaran hayat komponen

---

1. Fasa pelekap Fungsi kitaran hayat fasa pelekap hanya dilaksanakan sekali semasa fasa pelekap dan tidak lagi dilaksanakan apabila data dikemas kini.

1), pembina

Angular dilaksanakan apabila menginstant kelas komponen dan boleh digunakan untuk menerima objek contoh perkhidmatan yang disuntik oleh Angular.

2), ngOnInit

export class ChildComponent {
  constructor (private test: TestService) {
    console.log(this.test) // "test"
  }
}

dilaksanakan selepas menerima nilai atribut input buat kali pertama, di mana operasi yang diminta boleh dilakukan.

<app-child name="张三"></app-child>

3), ngAfterContentInit

export class ChildComponent implements OnInit {
  @Input("name") name: string = ""
  ngOnInit() {
    console.log(this.name) // "张三"
  }
}

dipanggil selepas pemaparan awal unjuran kandungan selesai.

<app-child>
	<div #box>Hello Angular</div>
</app-child>

4), ngAfterViewInit

export class ChildComponent implements AfterContentInit {
  @ContentChild("box") box: ElementRef<HTMLDivElement> | undefined

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

dipanggil apabila paparan komponen dipaparkan.

<!-- app-child 组件模板 -->
<p #p>app-child works</p>

export class ChildComponent implements AfterViewInit {
  @ViewChild("p") p: ElementRef<HTMLParagraphElement> | undefined
  ngAfterViewInit () {
    console.log(this.p) // <p>app-child works</p>
  }
}

2. Fasa kemas kini1), ngOnChanges

Dilaksanakan apabila nilai atribut input berubah, ia juga akan dilaksanakan sekali semasa tetapan awal Pesanan adalah lebih baik daripada ngOnInit
Tidak kira berapa banyak atribut input berubah pada masa yang sama, cangkuk. fungsi hanya akan dilaksanakan sekali, dan nilai yang diubah Akan disimpan dalam parameter pada masa yang sama
Jenis parameter ialah SimpleChanges, dan jenis sub-sifat ialah SimpleChange
Untuk jenis data asas, selagi nilai berlaku Perubahan boleh dikesan
Untuk jenis data rujukan, perubahan dari satu objek ke objek lain boleh dikesan , tetapi perubahan dalam nilai atribut dalam objek yang sama tidak dapat dikesan, tetapi Tidak menjejaskan data kemas kini templat komponen.

Perubahan nilai jenis data asas

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

export class AppComponent {
  name: string = "张三";
  age: number = 20
  change() {
    this.name = "李四"
    this.age = 30
  }
}

export class ChildComponent implements OnChanges {
  @Input("name") name: string = ""
  @Input("age") age: number = 0

  ngOnChanges(changes: SimpleChanges) {
    console.log("基本数据类型值变化可以被检测到")
  }
}

Perubahan jenis data rujukan

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

export class AppComponent {
  person = { name: "张三", age: 20 }
  change() {
    this.person = { name: "李四", age: 30 }
  }
}

2), ngDoCheck: Terutamanya digunakan untuk penyahpepijatan, selagi atribut input berubah, sama ada jenis data asas, jenis data rujukan atau perubahan atribut dalam rujukan jenis data, ia akan dilaksanakan.

export class ChildComponent implements OnChanges {
  @Input("person") person = { name: "", age: 0 }

  ngOnChanges(changes: SimpleChanges) {
    console.log("对于引用数据类型, 只能检测到引用地址发生变化, 对象属性变化不能被检测到")
  }
}

3), ngAfterContentChecked: Dilaksanakan selepas kemas kini unjuran kandungan selesai.

4), ngAfterViewChecked: Dilaksanakan selepas paparan komponen dikemas kini.

3. Fasa memunggah 1), ngOnDestroy

dipanggil sebelum komponen dimusnahkan, digunakan untuk operasi pembersihan .

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

export class HomeComponent implements OnDestroy {
  ngOnDestroy() {
    console.log("组件被卸载")
  }
}

Video Pengaturcaraan

! !

Atas ialah kandungan terperinci Pembelajaran sudut bercakap tentang komunikasi komponen dan kitaran hayat komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!