Comment communiquer entre les composants Angular parent et enfant ? Une brève analyse de la méthode de transmission des valeurs de père en fils

AngularComment communiquer entre les composants parent et enfant ? Cet article vous présentera la méthode de transfert de valeur des composants angulaires parent-enfant.

Transférer les valeurs via Input et Ouput

Composant parent : html et ts

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

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

Composant enfant : html et 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属性");
}

[Recommandation de tutoriel associée : "tutoriel angulaire"]

Via setter Écoute des changements dans les attributs

Le composant parent est le même que ci-dessus, le composant enfant :

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

Surveillance des changements dans les attributs d'entrée via la fonction hook ngOnChanges

ngOnChanges est plus simple que la méthode setter lors de la surveillance de plusieurs attributs.

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

Appelez les méthodes et les propriétés du composant enfant via des variables de modèle dans le composant html du composant parent.

La variable de modèle obtient une référence au composant enfant. Composant parent :

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

Composant enfant :

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

Le composant parent obtient l'instance du composant enfant via 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();
}

Communique via le 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");
    }
}

Composant parent :

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

Composant enfant :

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

Méthode de transfert du composant parent

Le composant parent transmet la méthode au composant enfant via des attributs, et le composant enfant l'appelle. Il n'est généralement pas recommandé que React utilise cette méthode de communication. Il se peut que la liaison basée sur cela soit compliquée, donc angulaire n'est pas recommandé. L’émergence de React Hooks est aussi en partie due à C'est la complexité de la classe. Composant parent :

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

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

Composant enfant :

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

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

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!