Pembelajaran sudut bercakap tentang komunikasi komponen dan kitaran hayat komponen-tutorial js-php.cn

Pembelajaran sudut bercakap tentang komunikasi komponen dan kitaran hayat komponen

青灯夜游

Lepaskan： 2022-06-09 20:21:30

ke hadapan

1959 orang telah melayarinya

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!

Pembelajaran sudut bercakap tentang komunikasi komponen dan kitaran hayat komponen

Komunikasi Komponen

1 🎜 >

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

Salin selepas log masuk

[Cadangan tutorial berkaitan: "

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

Salin selepas log masuk

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>

Salin selepas log masuk

import { Input } from &#39;@angular/core&#39;;

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

Kitaran hayat komponen

Pembelajaran sudut bercakap tentang komunikasi komponen dan 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"
  }
}

Salin selepas log masuk

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

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

Salin selepas log masuk

3), ngAfterContentInit

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

Salin selepas log masuk

dipanggil selepas pemaparan awal unjuran kandungan selesai.

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

Salin selepas log masuk

4), ngAfterViewInit

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

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

Salin selepas log masuk

dipanggil apabila paparan komponen dipaparkan.

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

Salin selepas log masuk

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

Salin selepas log masuk

2. Fasa kemas kini1), ngOnChanges

Perubahan nilai jenis data asas

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

Salin selepas log masuk

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

Salin selepas log masuk

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

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

Salin selepas log masuk

Perubahan jenis data rujukan

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

Salin selepas log masuk

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

Salin selepas log masuk

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("对于引用数据类型, 只能检测到引用地址发生变化, 对象属性变化不能被检测到")
  }
}

Salin selepas log masuk

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("组件被卸载")
  }
}

Salin selepas log masuk

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!