Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "angular component communication and component life cycle is what", the content is detailed, the steps are clear, the details are handled properly, I hope this "angular component communication and component life cycle is what" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge bar.

Component communication

1. Transfer data to the component

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

Note: add [] to the attribute to indicate the binding dynamic value, Boolean type after receiving within the component, normal binding value without [], and string type after receiving within the component.

Import {Input} from'@ angular/core';export class FavoriteComponent {@ Input ("is-Favorite") isFavorite: boolean = false}

2. The component transfers data to the outside.

Requirements: pass data to the parent component by clicking a button in the child component

Click// subcomponent class import {EventEmitter, Output} from "@ angular/core" export class FavoriteComponent {@ Output () change = new EventEmitter () onClick () {this.change.emit ({name: "Zhang San"})}} / / 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 mount phase is executed only once in the mount phase and is no longer executed when the data is updated.

1), constructor

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

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

2), ngOnInit

Executed after the input attribute value is received for the first time, where the requested operation can be performed.

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

3), ngAfterContentInit

Called when the initial rendering of the content projection is complete.

Hello Angularexport class ChildComponent implements AfterContentInit {@ ContentChild ("box") box: ElementRef | undefined ngAfterContentInit () {console.log (this.box) / / Hello Angular}}

4), ngAfterViewInit

Called when the component view rendering is complete.

App-child works

Export class ChildComponent implements AfterViewInit {@ ViewChild ("p") p: ElementRef | undefined ngAfterViewInit () {console.log (this.p) / /

App-child works

}}

2. Update phase

1), ngOnChanges

Executes when the input attribute value changes, and also executes once at the initial setting, in better order than ngOnInit

No matter how many input attributes change at the same time, the hook function will only be executed once, and the changed value will be stored in the parameter at the same time.

The parameter type is SimpleChanges and the child attribute type is SimpleChange

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

For reference data types, you can detect a change from one object to another, but no change in property values in the same object can be detected, but the component template updates the data.

Basic data type value change

Changeexport class AppComponent {name: string = "Zhang San"; age: number = 20 change () {this.name = "Li Si" this.age = 30}} export class ChildComponent implements OnChanges {@ Input ("name") name: string = "@ Input (" age ") age: number = 0 ngOnChanges (changes: SimpleChanges) {console.log (" basic data type value changes can be detected ")}}

Reference data type change

Changeexport class AppComponent {person = {name: "Zhang San", age: 20} change () {this.person = {name: "Li Si", age: 30} export class ChildComponent implements OnChanges {@ Input ("person") person = {name: ", age: 0} ngOnChanges (changes: SimpleChanges) {console.log (" for reference data types, only a change in the reference address can be detected Object property changes cannot be detected ")}}

2), ngDoCheck: mainly used for debugging, whenever the input property changes, whether it is the basic data type or the reference data type or the property change in the reference data type.

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

4), ngAfterViewChecked: execute after the component view update is completed.

3. Uninstall phase

1), ngOnDestroy

Called before the component is destroyed for the cleanup operation.

Export class HomeComponent implements OnDestroy {ngOnDestroy () {console.log ("components uninstalled")} read here, this article "what is the communication and life cycle of angular components" has been introduced, and if you want to grasp the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.