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 チュートリアル"]

セッターを介してプロパティの変更をリッスンする

親コンポーネントは上記と同じで、サブコンポーネントは次のとおりです。

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

サービスを通じて通信

サービス:

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

子コンポーネント:

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

親コンポーネントの配信方法

親コンポーネントは属性を子コンポーネントのメソッドに渡し、子コンポーネントはそれを呼び出します。これは通常推奨されません。React はこの通信メソッドを使用します。 これによるバインディングは複雑になる可能性があるため、angular は推奨されません。 React Hooks の出現も、部分的には次のような理由によるものです。 これがクラスクラスの複雑さです。 親コンポーネント:

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

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

子コンポーネント:

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

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

プログラミング関連の知識については、プログラミング ビデオをご覧ください。 ！

以上がAngular の親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか?父親から息子へ価値観を渡す方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。