Angular 상위 구성요소와 하위 구성요소 간에 통신하는 방법은 무엇입니까? 아버지에서 아들에게 가치관을 전달하는 방법에 대한 간략한 분석

Angular상위 구성 요소와 하위 구성 요소 간에 통신하는 방법은 무엇입니까? 이 기사에서는 Angular 상위-하위 구성 요소의 값 전송 방법을 소개합니다.

입력 및 출력을 통해 값 전송

상위 구성 요소: html 및 ts

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

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

하위 구성 요소: html 및 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属性");
}

[관련 튜토리얼 권장 사항: "angular tutorial"]

setter를 통해 속성 변경 수신

상위 구성 요소는 위와 동일하고 하위 구성 요소는 다음과 같습니다.

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

ngOnChanges 후크 기능을 통해 입력 속성 변경 모니터링

ngOnChanges는 여러 항목을 모니터링할 때 setter 방법보다 간단합니다. 속성.

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

상위 구성 요소 HTML의 템플릿 변수를 통해 하위 구성 요소의 메서드와 속성을 호출합니다.

템플릿 변수는 하위 구성 요소에 대한 참조를 가져옵니다. 상위 구성 요소:

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

하위 구성 요소:

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

상위 구성 요소는 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();
}

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

상위 구성 요소:

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

하위 구성 요소:

아아아아

상위 컴포넌트 전송 방법

상위 컴포넌트는 속성을 통해 하위 컴포넌트에 메소드를 전달하며, 하위 컴포넌트는 이를 호출하는 것이 일반적입니다. 이를 기반으로 한 바인딩이 복잡할 수 있으므로 Angle은 권장되지 않습니다. React Hooks의 출현도 부분적으로는 이것이 수업 수업의 복잡성입니다. 상위 구성 요소:

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

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

하위 구성 요소:

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

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

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 Angular 상위 구성요소와 하위 구성요소 간에 통신하는 방법은 무엇입니까? 아버지에서 아들에게 가치관을 전달하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!