Angular learning talks about component communication and component life cycle

This article will take you to understand the component communication and component life cycle in angular, and briefly introduce the method of transferring data to the inside of the component and the method of transferring data to the outside. I hope it will be helpful to everyone!

Component communication

---

1. Pass data inside 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: Add [] outside the attribute to indicate binding a dynamic value , after being received in the component, it is a Boolean type. Without [], it means binding a normal value. After being received in the component, it is a string type.

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

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

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

2. Component transfers data to the outside

Requirement: Pass data to the parent component by clicking the button in the child component

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

Component life cycle

---

#1. Mounting phase

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

1), 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, where the requested operation can be performed.

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

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

3), ngAfterContentInit

Called after the initial rendering of the 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

Called when the component view is rendered.

<!-- 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, update phase

1), ngOnChanges

• occurs when the input attribute value occurs It is executed when it changes, and it will also be 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 in the parameters at the same time.

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

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

• For reference data types, it is possible to detect changes from one object to another, but changes in attribute values ​​in the same object cannot be detected, but it does not affect component template updates. data.

Basic data type value changes

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

Reference data type changes

<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: 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, used for cleanup operations.

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

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of Angular learning talks about component communication and component life cycle. For more information, please follow other related articles on the PHP Chinese website!