L'apprentissage angulaire parle de la communication des composants et du cycle de vie des composants

Cet article vous amènera à comprendre la communication des composants et le cycle de vie des composants dans angular, et présentera brièvement les méthodes de transfert de données vers l'intérieur du composant et la méthode de transfert de données vers l'extérieur, j'espère que cela vous sera utile. à tout le monde !

Communication du composant

---

1. Transmettez les données à l'intérieur du composant

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

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

[Tutoriels associés recommandés : "Tutoriel angulaire"]

Remarque : Ajouter [] 表示绑定动态值，在组件内接收后是布尔类型，不加 [] 表示绑定普通值，在组件内接收后是字符串类型 en dehors des attributs .

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

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

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

2. Le composant transfère les données vers l'extérieur

Exigences : Transmettez les données au composant parent en cliquant sur le bouton dans le composant enfant

<!-- 子组件模板 -->
<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)
  }
}

Cycle de vie du composant

---

1. Phase de montage

La fonction de cycle de vie de la phase de montage n'est exécutée qu'une seule fois pendant la phase de montage et n'est plus exécutée lorsque les données sont mises à jour.

1), le constructeur

Angular est exécuté lors de l'instanciation de la classe de composant et peut être utilisé pour recevoir l'objet instance de service injecté par Angular.

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

2), ngOnInit

sont exécutés après avoir reçu la valeur de l'attribut d'entrée pour la première fois, où l'opération de requête peut être effectuée.

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

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

3), ngAfterContentInit

est appelé lorsque le rendu initial de la projection de contenu est terminé.

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

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

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

4), ngAfterViewInit

Appelé lorsque la vue du composant est rendue.

<!-- 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, phase de mise à jour

1), ngOnChanges

• est exécuté lorsque la valeur de l'attribut d'entrée change, et sera également exécuté une fois lors du réglage initial. L'ordre est meilleur que ngOnInit

• . peu importe le nombre d'attributs d'entrée modifiés en même temps, la fonction hook ne sera exécutée qu'une seule fois et la valeur modifiée sera stockée dans le paramètre en même temps

• Le type de paramètre est SimpleChanges et la sous-propriété le type est SimpleChange

• Pour les types de données de base, tant que la valeur change Détecté

• Pour les types de données de référence, le changement d'un objet à un autre peut être détecté, mais les changements dans les valeurs d'attribut dans le même objet ne peut pas être détecté, mais cela n’affecte pas les données de mise à jour du modèle de composant.

Changement de valeur du type de données de base

<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("基本数据类型值变化可以被检测到")
  }
}

Changement de type de données de référence

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

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

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

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

2), ngDoCheck : principalement utilisé pour le débogage, tant que l'attribut d'entrée change, qu'il s'agisse d'un type de données de base ou d'un type de données de référence ou une référence. Toute modification de propriété dans le type de données sera exécutée.

3), ngAfterContentChecked : exécuté une fois la mise à jour de la projection de contenu terminée.

4), ngAfterViewChecked : exécuté après la mise à jour de la vue du composant.

3. Phase de déchargement

1), ngOnDestroy

est appelé avant la destruction du composant, utilisé pour les opérations de nettoyage.

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

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!