Wie kommuniziere ich zwischen übergeordneten und untergeordneten Angular-Komponenten? Eine kurze Analyse der Methode zur Weitergabe von Werten vom Vater an den Sohn

AngularWie kommuniziert man zwischen übergeordneten und untergeordneten Komponenten? Dieser Artikel führt Sie in die Wertübertragungsmethode von Angular-Eltern-Kind-Komponenten ein.

Werte über Eingabe und Ausgabe übertragen

Übergeordnete Komponente: HTML und TS

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

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

Untergeordnete Komponente: HTML und 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属性");
}

[Verwandte Tutorial-Empfehlung: „Angular Tutorial“]

Durch Setter Auf Änderungen in Attributen warten

Die übergeordnete Komponente ist die gleiche wie oben, die untergeordnete Komponente:

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

Überwachen von Änderungen in Eingabeattributen über die Hook-Funktion ngOnChanges

ngOnChanges ist bei der Überwachung mehrerer Elemente einfacher als die Setter-Methode Attribute.

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

Rufen Sie die Methoden und Eigenschaften der untergeordneten Komponente über Vorlagenvariablen im HTML der übergeordneten Komponente auf.

Die Vorlagenvariable erhält einen Verweis auf die untergeordnete Komponente. Übergeordnete Komponente:

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

Untergeordnete Komponente:

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

Die übergeordnete Komponente erhält die Instanz der untergeordneten Komponente über 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();
}

Kommuniziert über den Dienst

Dienst:

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

Übergeordnete Komponente:

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

Untergeordnete Komponente:

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

Übertragungsmethode der übergeordneten Komponente

Die übergeordnete Komponente übergibt die Methode über Attribute an die untergeordnete Komponente, und die untergeordnete Komponente ruft sie auf. Diese Kommunikationsmethode wird im Allgemeinen nicht empfohlen. Es kann sein, dass die darauf basierende Bindung kompliziert ist, sodass eine eckige Bindung nicht zu empfehlen ist. Die Entstehung von React Hooks ist teilweise auch darauf zurückzuführen Das ist die Komplexität der Klassenklasse. Übergeordnete Komponente:

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

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

Untergeordnete Komponente:

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

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

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonWie kommuniziere ich zwischen übergeordneten und untergeordneten Angular-Komponenten? Eine kurze Analyse der Methode zur Weitergabe von Werten vom Vater an den Sohn. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!