Home > Article > Web Front-end > Detailed explanation of component interaction in Angular
This article will give you a detailed introduction to Angular component interaction. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
Component interaction: Component communication allows two or more components to share information among.
Usage scenarios: When a certain function is used in multiple components, the specific function can be encapsulated in a sub-component, and specific tasks or workflows can be processed in the sub-component. .
Interaction method:
@Input
and @Output
decorators. service
. [Related recommendation: "angular tutorial"]
Through input Type binding passes data from parent component to child component.
The input property is a settable property with the @Input decorator.
Values "flow" into this property when it is bound via property binding.
Some code examples are as follows:
import { Component, Input } from '@angular/core'; @Component({ selector: 'app-selector', template: ` // 模板代码 ` }) export class TestComponent { @Input() hero: Hero; @Input('master') masterName: string; }
The above example contains two input attributes. The second @Input specifies an alias master for the attribute name masterName of the subcomponent.
Reference the child component in the parent component. Some code examples are as follows:
<app-hero-child *ngFor="let hero of heroes" [hero] = "hero" [master] = "master"> </app-hero-child>
Use the setter() method of an input attribute to intercept the value changes in the parent component and take action.
Some code examples are as follows:
export class TestComponent { @Input() set name(name: String) { // 逻辑处理 } }
Use the ngOnChanges() method of the OnChanges life cycle hook interface to monitor changes in input attribute values and respond.
Note: When multiple, interactive input properties need to be monitored, this method is more appropriate than using the property's setter method.
Import Input, OnChanges and SimpleChange from @angular/core in the child component
import { Component, Input, OnChanges, SimpleChange } from '@angular/core'; @Component({ selector: 'app-version-child', template: ` // 模板代码 ` }) export class ChildComponent implements OnChanges { @Input() major: number; @Input() minor: number; ngOnChanges(changes: { [propKey: string]: SimpleChange }) { for (let propName in changes) { // propName为输入属性的名字 let changedProp = changes[propName]; // changedProp为SimpleChange对象 // 其它代码 } } }
SimpleChange classThe source code is as follows:
/** * Represents a basic change from a previous to a new value for a single * property on a directive instance. Passed as a value in a * {@link SimpleChanges} object to the `ngOnChanges` hook. * * @see `OnChanges` * * @publicApi */ export declare class SimpleChange { previousValue: any; currentValue: any; firstChange: boolean; constructor(previousValue: any, currentValue: any, firstChange: boolean); /** * Check whether the new value is the first value assigned. */ isFirstChange(): boolean; }
The child component exposes an EventEmitter property. When an event occurs, the child component uses this property to emit (upward ejection) events. The parent component binds to this event property and responds when the event occurs.
The EventEmitter property of a child component is an output property, usually with an @Output decorator.
——Interaction between Angular components
Parent component and its child component share the same service, using This service enables two-way communication within a component family.
The scope of this service instance is limited to the parent component and its child components. Components outside this component subtree will not be able to access the service or communicate with them.
For detailed documentation, please refer to the part related to Angular component interaction
More programming related knowledge , please visit: Introduction to Programming! !
The above is the detailed content of Detailed explanation of component interaction in Angular. For more information, please follow other related articles on the PHP Chinese website!