A brief discussion on the interaction methods of Angular components

This article will talk with you about the interaction methods of Angular components. 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 Share information between one or more components.

Usage scenarios: When a certain function is used in multiple components, the specific function can be encapsulated in a sub-component and specific tasks can be processed in the sub-component. or workflow.

Interaction method:

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

Recommended related tutorials: "angular tutorial"

---

##Transfer data from parent component to child component

Transmit data from parent component to child component through input binding.

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>

---

Listen to changes in input attribute values

(1) Use the setter method

Use the setter() method of an input property 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 Listens for changes in input property values ​​and responds.

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 services

Parent component and its child component Share the same service and use this service to implement two-way communication within the 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 more programming related knowledge, please visit:

Programming Video! !

The above is the detailed content of A brief discussion on the interaction methods of Angular components. For more information, please follow other related articles on the PHP Chinese website!