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.

Angular component interaction

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:

• Method 1: Interact through the @Input and @Output decorators.
• Method 2: Interact through service.

[Related recommendation: "angular tutorial"]

Transfer data from parent component to child component

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:

Listen to changes in input attribute values

(1) Use the setter method

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) {
		// 逻辑处理
	}
}

(2) Use the ngOnChanges() method

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 parent component listens to the events of the child component

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 child component communicate through service

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.

Detailed documentation

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!