1. Transmettez les données dans le composant
<app-favorite [isFavorite]="true"></app-favorite>
// favorite.component.ts
importer {Input} depuis '@angular/core' ;
classe d'exportation FavoriteComponent {
@Input() estFavorite : boolean = false ;
} [Recommandation du didacticiel associé : "tutoriel angulaire"]
Remarque : Ajouter [] en dehors de l'attribut signifie lier une valeur dynamique après l'avoir reçue dans le composant, il s'agit d'un type booléen. Ne pas ajouter [] signifie lier une valeur normale. dans le composant, c'est字符串类型.
<app-favorite [is-Favorite]="true"></app-favorite>
import { Input } from '@angular/core' ;
classe d'exportation FavoriteComponent {
@Input("is-Favorite") isFavorite : boolean = false
} 2. Le composant
doit transférer des données vers l'extérieur : transmettez les données au composant parent en cliquant sur le bouton dans le sous-composant
<!-- Modèle de sous-composant--> <button (click)="onClick()">cliquez</button>
// Importation de classe de sous-composant { EventEmitter, Output } depuis "@angular/core"
classe d'exportation FavoriteComponent {
@Output() changement = new EventEmitter()
surClic() {
this.change.emit({ nom : "Zhang San" })
}
} <!-- Modèle de composant parent --> <app-favorite (change)="onChange($event)"></app-favorite>
// Classe d'exportation de classe de composant parent AppComponent {
onChange(événement : { nom : chaîne }) {
console.log (événement)
}
} 
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 lors de la mise à jour des données.
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.
classe d'exportation ChildComponent {
constructeur (test privé : TestService) {
console.log(this.test) // "test"
}
} 2), ngOnInit
est exécuté après avoir reçu la valeur de l'attribut d'entrée pour la première fois, et l'opération demandée peut être effectuée ici.
<app-child name="Zhang San"></app-child>
classe d'exportation ChildComponent implémente OnInit {
@Input("name") nom : chaîne = ""
ngOnInit() {
console.log(this.name) // "Zhang San"
}
} 3), ngAfterContentInit
est appelé une fois le rendu initial de la projection de contenu terminé.
<enfant-application> <div #box>Bonjour Angular</div> </app-child>
classe d'exportation ChildComponent implémente AfterContentInit {
@ContentChild("box") boîte : ElementRef<HTMLDivElement> non défini
ngAfterContentInit() {
console.log(this.box) // <div>Bonjour Angular</div>
}
} 4), ngAfterViewInit
est appelé après le rendu de la vue du composant.
<!-- modèle de composant app-child --> <p #p>app-child works</p>
la classe d'exportation ChildComponent implémente AfterViewInit {
@ViewChild("p") p: ElementRef<HTMLParagraphElement> non défini
ngAfterViewInit () {
console.log(this.p) // <p>app-child fonctionne</p>
}
} 2. Phase de mise à jour
1), ngOnChanges
est exécuté lorsque la valeur de l'attribut d'entrée change, et est également exécuté une fois lors du réglage initial. L'ordre est meilleur que ngOnInit.
Quel que soit le nombre d'attributs d'entrée modifiés en même temps, la fonction hook le fera. ne sera exécuté qu'une seule fois et les valeurs modifiées seront stockées en même temps dans les paramètres,
le type de paramètre est SimpleChanges et le type de sous-propriété est SimpleChange.
Pour les types de données de base, il peut être détecté tant que le. changements de valeur
. Pour les types de données de référence, il peut détecter le changement d'un objet à un autre, mais la détection ne peut pas. Les modifications apportées aux valeurs de propriété dans le même objet n'affectent pas les données de mise à jour du modèle de composant.
Modifications de la valeur du type de données de base
<app-child [name]="name" [age]="age"></app-child> <button (click)="change()">change</button>
classe d'exportation AppComponent {
nom : chaîne = « Zhang San » ;
âge : nombre = 20
changement() {
this.name = "李思"
cet âge = 30
}
} classe d'exportation ChildComponent implémente OnChanges {
@Input("name") nom : chaîne = ""
@Input("age") âge : nombre = 0
ngOnChanges (changements : SimpleChanges) {
console.log("Les modifications des valeurs des types de données de base peuvent être détectées")
}
} Modification du type de données de référence
<app-child [person]="person"></app-child> <button (click)="change()">change</button>
classe d'exportation AppComponent {
personne = { nom : "张三", âge : 20 }
changement() {
this.person = { nom : "李思", âge : 30 }
}
} classe d'exportation ChildComponent implémente OnChanges {
@Input("person") personne = { nom : "", âge : 0 }
ngOnChanges (changements : SimpleChanges) {
console.log("Pour les types de données de référence, seules les modifications de l'adresse de référence peuvent être détectées, les modifications des attributs d'objet ne peuvent pas être détectées")
}
} 2), ngDoCheck : principalement utilisé pour le débogage, tant que les attributs d'entrée changent, qu'il s'agisse d'un type de données de base, d'un type de données de référence ou d'un changement d'attribut dans un type de données de référence, il sera exécuté.
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ésinstallation
1), ngOnDestroy
est appelé avant la destruction du composant et est utilisé pour les opérations de nettoyage.
la classe d'exportation HomeComponent implémente OnDestroy {
ngOnDestroy() {
console.log("Le composant a été désinstallé")
}
}