Bagaimana untuk berkomunikasi antara komponen ibu bapa dan anak Angular? Analisis ringkas tentang kaedah penyampaian nilai daripada bapa kepada anak lelaki

SudutBagaimana untuk berkomunikasi antara komponen ibu bapa dan anak? Artikel ini akan memperkenalkan anda kepada kaedah pemindahan nilai komponen induk-anak Angular.

Melalui nilai melalui Input dan Ouput

Komponen induk: html dan ts

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

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

Subkomponen: html dan 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属性");
}

[Cadangan tutorial berkaitan: "tutorial sudut"]

Dengar perubahan dalam sifat melalui penetap

Komponen induk adalah sama seperti di atas, komponen anak:

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

Pantau perubahan dalam atribut input melalui fungsi cangkuk ngOnChanges

ngOnChanges sedang mendengar berbilang Apabila menetapkan atribut, ia lebih mudah daripada kaedah penetap.

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

Kaedah dan sifat komponen anak dipanggil melalui pembolehubah templat dalam html komponen induk.

Pembolehubah templat mendapat rujukan kepada komponen anak. Komponen induk:

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

Komponen anak:

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

Komponen induk mendapatkan contoh komponen anak melalui 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();
}

Berkomunikasi melalui perkhidmatan

perkhidmatan:

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

Komponen induk:

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

Komponen kanak-kanak:

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

Kaedah pemindahan komponen induk

Komponen induk menghantar kaedah kepada komponen anak melalui atribut, dan komponen anak memanggilnya Ini biasanya tidak disyorkan. Mungkin pengikatan berdasarkan ini adalah rumit, jadi sudut tidak disyorkan. Kemunculan React Hooks juga sebahagiannya disebabkan oleh Inilah kerumitan kelas kelas. Komponen induk:

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

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

Komponen anak:

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

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

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimana untuk berkomunikasi antara komponen ibu bapa dan anak Angular? Analisis ringkas tentang kaedah penyampaian nilai daripada bapa kepada anak lelaki. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!