How to communicate between Angular parent and child components? A brief analysis of the method of passing values ​​from father to son

AngularHow to communicate between parent and child components? This article will introduce you to the value transfer method of Angular parent-child components.

Passing values ​​through Input and Ouput

Parent component: html and ts

<app-liftcycle [name]="name" (changeName)="changeName($event)"></app-liftcycle>

public name: string = "jack";
public changeName(value: string) {
    this.name = value;
}

Child component: html and ts

<div (click)="emit()">{{name}}</div>

import { Component, Input, EventEmitter, Output } from '@angular/core';
@Input() name: string;
@Output() changeName: EventEmitter<string> = new EventEmitter<string>();
public emit() {
    this.changeName.emit("修改name属性");
}

[Related tutorial recommendation: "angular tutorial"]

Listen to changes in properties through setters

Parent Components are the same as above, sub-components:

private _name: string = "";
@Input() 
public get name(): string {
    return this._name;
}
public set name(value: string) {
    this._name = value + "定义结构";
}

Monitor changes in input attributes through the ngOnChanges hook function

ngOnChanges is simpler than the setter method when monitoring multiple attributes. .

@Input() name: string;
ngOnChanges(changes: SimpleChanges): void {
    (({name}) => {
        console.log(name.currentValue,name.previousValue);
    })(changes);
}

The methods and properties of the child component are called through template variables in the parent component html.

The template variable obtains a reference to the child component. Parent component:

<app-liftcycle #child></app-liftcycle>
<button (click)="child.childFn()">按钮</button>

Child component:

public childFn() {
    console.log("通过模板变量调用子组件中的方法");
}

The parent component obtains the child component instance through ViewChild

<app-liftcycle [name]="name" (changeName)="changeName($event)" #child></app-liftcycle>
<button (click)="childFn()">childFn</button>

@ViewChild("child") child: LiftcycleComponent;
public childFn(): void {
    this.child.childFn();
}

Communicates through service

service:

import { Subject } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class CommunService {

    constructor() {}
    public commun = new Subject<string>();
    communSend() {
        this.commun.next("send");
    }
}

Parent component:

constructor(private commun: CommunService) { }
public send(): void {
    this.commun.communSend();
}

Child component:

constructor(private commun: CommunService) { 
    this.commun.commun.subscribe((value) => {console.log(value)});
}

Parent component delivery method

The parent component passes the attribute to the child component method, and the child component calls it. This is generally not recommended. React uses this communication method. It may be that the binding based on this is complicated, so angular is not recommended. The emergence of React Hooks is also partly due to This is the intricacy of the class class. Parent component:

<app-liftcycle [send]="send.bind(this)"></app-liftcycle>

public name: string = "jack";
public send(): void {
    console.log(this.name);
}

Child component:

<button (click)="childSend()">childSend</button>

@Input() send: Function;
public childSend() {
    this.send();
}

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of How to communicate between Angular parent and child components? A brief analysis of the method of passing values ​​from father to son. For more information, please follow other related articles on the PHP Chinese website!