web-dev-qa-db-ja.com

Angular子から親にデータを渡す

私はAngularプロジェクトで学習/作業しています。たくさんのことをして、「正しい方法」でやろうとしているので、今やりたいことは次のとおりです。

子コンポーネントから親コンポーネントへの変数（出力）を取得したいのですが、出力を使用したくない、聞きたくない、親が必要なときにいつでも取得したい、child.getVariable() childviewを使用する必要があるという投稿に出くわしましたが、質問は私のものと同じではなかったので、childviewを使用して子コンポーネントからデータを取得することをお勧めしますか？

angulartypescriptoutputevent-listenerchildviews
7
nikagar4

子コンポーネントにEventEmitterを@Outputとして登録します。

@Output() onDatePicked: EventEmitter<any> = new EventEmitter<any>();
Emit value on click:

public pickDate(date: any): void {
    this.onDatePicked.emit(date);
}

親コンポーネントのテンプレートでイベントをリッスンします。

<div>
    <calendar (onDatePicked)="doSomething($event)"></calendar>
</div>

および親コンポーネント：

public doSomething(date: any):void {
    console.log('Picked date: ', date);
}

参照： stackoverflow.com/a/42109866/4697384

3
Amit

子コンポーネントに同期的にアクセスする場合は、次のようにViewChildを使用することをお勧めします。

import { CountryCodesComponent } from '../../components/country-codes/country-codes.component';
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'signup',
    templateUrl: "signup.html"
})
export class SignupPage {
    @ViewChild(CountryCodesComponent)
    countryCodes: CountryCodesComponent;
    nationalPhoneNumber = '';

    constructor() {}

    get phoneNumber(): string {
        return '+' + this.countryCodes.countryCode + this.nationalPhoneNumber;
    }
}
1
Mete Cantimur

親がAngularの子コンポーネントと通信する方法。

（i）子コンポーネントはEventEmitterプロパティを公開し、何かが発生したときにイベントを発行します。親はそのイベントプロパティにバインドし、それらのイベントに反応します。

（ii）親コンポーネントは、データバインディングを使用して、子プロパティを読み取ったり、子メソッドを呼び出したりすることはできません。子要素のテンプレート参照変数を作成してから、親テンプレート内でその変数を参照することで、両方を行うことができます。

（iii）ローカル変数アプローチは単純で簡単です。ただし、親子の配線は完全に親テンプレート内で行う必要があるため、制限があります。親コンポーネント自体は子にアクセスできません。

（iv）親と子はサービスを介して通信できます。

詳細な説明については、以下のリンクを参照してください。

Angular公式ウェブサイト-コンポーネント通信

0
Randhish kumar

親のテンプレート内から子コンポーネントの変数にアクセスするだけでよいですか？もしそうなら、あなたは使用することができます：

<child-component #childComponentRef></child-component>

その後、親テンプレート内から＃childComponentRef.someVariableにアクセスできます。そうでなければ、Angularチームは共有サービスを推奨していると思います。とにかく、それらはもう少し用途が広いです。 https://angular.io/docs/ts/latest/cookbook/component-を参照してください。 communication.html＃！＃parent-and-children-communicate-via-a-service

0
jezzah