Angular component lifecycle

1. Mount phase

The mount phase lifecycle function is executed only once during the mount phase and not again during data updates

1. constructor

   Angular executes it when it instantiates a component class and can be used to receive Angular injected service instance objects

   export class ChildComponent {
     constructor (private test: TestService) {
       console.log(this.test)
     }
   }
   Copy the code

2. ngOnInit

   Executed after the input property value is first received, where the request action can be performed

   <app-child name="Zhang"></app-child>
   Copy the code

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

3. ngAfterContentInit

   Called when the initial rendering of the content projection is complete

   <app-child>
     <div #box>Hello Angular</div>
   </app-child>
   Copy the code

   export class ChildComponent implements AfterContentInit {
     @ContentChild("box") box: ElementRef<HTMLDivElement> | undefined
   
     ngAfterContentInit() {
       console.log(this.box) // <div>Hello Angular</div>}}Copy the code

4. ngAfterViewInit

   Called when the component view is rendered

   <! -- Appchild component template -->
   <p #p>app-child works</p>
   Copy the code

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

2. Update phase

1. ngOnChanges

   • It is executed when the input property value changes, and once during the initial setting, in superior orderngOnInit
   • No matter how many input attributes change at the same time, the hook function is executed only once, and the value of the change is stored in the parameter
   • The parameter type isSimpleChanges, the subattribute type isSimpleChange
   • For primitive data types, any change in value can be detected
   • For reference data types, it is possible to detect changes from one object to another without detecting changes in property values within the same object, but without affecting component templates to update data.

   Base data type value changes

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

   export class AppComponent {
     name: string = "Zhang";
     age: number = 20
     change() {
       this.name = "Bill"
       this.age = 30}}Copy the code

   export class ChildComponent implements OnChanges {
     @Input("name") name: string = ""
     @Input("age") age: number = 0
   
     ngOnChanges(changes: SimpleChanges) {
       console.log("Base data type value changes can be detected")}}Copy the code

   Reference data type changes

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

   export class AppComponent {
     person = { name: "Zhang".age: 20 }
     change() {
       this.person = { name: "Bill".age: 30}}}Copy the code

   export class ChildComponent implements OnChanges {
     @Input("person") person = { name: "".age: 0 }
   
     ngOnChanges(changes: SimpleChanges) {
       console.log("For reference data types, only reference address changes can be detected. Object property changes cannot be detected.")}}Copy the code

2. NgDoCheck: mainly used for debugging, executed whenever there is a change in the input property, whether it is a base data type or a reference data type or an attribute change in a reference data type.

3. NgAfterContentChecked: Execute after content projection updates are complete.

4. NgAfterViewChecked: Execute after component view updates are complete.

3. Uninstall phase

1. ngOnDestroy

   Called before a component is destroyed for cleanup operations

   export class HomeComponent implements OnDestroy {
     ngOnDestroy() {
       console.log("Component unmounted")}}Copy the code