Angular learning talks about component communication and component life cycle

Component communication

1. Pass data into the component

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

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

[Related tutorial recommendation: "angular tutorial"]

Note: Adding [] outside the attribute means binding a dynamic value. After receiving it in the component, it is a Boolean type. Not adding [] means binding a normal value. After receiving it in the component, is字符串类型.

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

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

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

2. The component

needs to transfer data to the outside: pass the data to the parent component by clicking the button in the sub-component

<!-- Sub-component template-->
<button (click)="onClick()">click</button>

// Subcomponent class import { EventEmitter, Output } from "@angular/core"

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

<!-- Parent component template -->
<app-favorite (change)="onChange($event)"></app-favorite>

// Parent component class export class AppComponent {
  onChange(event: { name: string }) {
    console.log(event)
  }
}

Component life cycle

1. Mounting phase

The life cycle function of the mounting phase is only executed once during the mounting phase and is no longer executed when the data is updated.

1). The constructor

Angular is executed when instantiating the component class and can be used to receive the service instance object injected by Angular.

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

2), ngOnInit

is executed after receiving the input attribute value for the first time, and the requested operation can be performed here.

<app-child name="Zhang San"></app-child>

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

3), ngAfterContentInit

is called after the initial rendering of content projection is completed.

<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

is called after the component view is rendered.

<!-- app-child component template -->
<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. Update phase

1), ngOnChanges

• is executed when the input attribute value changes, and is also executed once during initial setting. The order is better than ngOnInit.

• No matter how many input attributes change at the same time, the hook function will only be executed once, and the changed values ​​will be stored at the same time. In the parameters,

• the parameter type is SimpleChanges and the sub-property type is SimpleChange.

• For basic data types, it can be detected as long as the value changes

• . For reference data types, it can detect changing from one object to another, but the detection cannot Changes to property values ​​in the same object do not affect component template update data.

Basic data type value changes

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

export class AppComponent {
  name: string = "Zhang San";
  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("Changes in basic data type values ​​can be detected")
  }
}

Reference data type change

<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("For reference data types, only changes in the reference address can be detected, changes in object attributes cannot be detected")
  }
}

2), ngDoCheck: Mainly used for debugging, as long as the input attributes change, whether it is a basic data type, a reference data type, or an attribute change in a reference data type, it will be executed.

3), ngAfterContentChecked: Executed after the content projection update is completed.

4), ngAfterViewChecked: Executed after the component view is updated.

3. Uninstallation phase

1), ngOnDestroy

is called before the component is destroyed and is used for cleanup operations.

export class HomeComponent implements OnDestroy {
  ngOnDestroy() {
    console.log("Component was uninstalled")
  }
}