9

私はAngularプロジェクトを学んでいます/取り組んでいます.私はたくさんのことをしてきました.「正しい方法」で物事をやろうとしています.

子コンポーネントから親コンポーネントへの変数 (出力) を取得したいが、出力を使用したくない、聞きたくない、親が必要なときにいつでも取得したい、child.getVariable()のようなものchildview を使用する必要があるという 1 つの投稿に出くわしましたが、質問は私のものと同じではありませんでした。

4

4 に答える 4

4

親のテンプレート内から子コンポーネントの変数へのアクセスのみが必要ですか? その場合は、次を使用できます。

<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を参照してください

于 2016-12-17T16:21:48.507 に答える
4

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

于 2017-10-09T09:29:31.797 に答える
1

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

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

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

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

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

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

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

于 2019-04-23T10:35:03.493 に答える
1

子コンポーネントに同期的にアクセスする場合は、次のように 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;
    }
}
于 2016-12-17T16:37:46.650 に答える