web-dev-qa-db-ja.com

子コンポーネントから親コンポーネントへのデータの受け渡し

角度に問題があります。ここには2つのコンポーネントがあります。

  • MyApp（ParentComponent）
  • LoginPage（ChildComponent）

パーツUserNowにプロパティMyAppがあり、コンポーネントUserNowを介してプロパティLoginPageの値を設定したいと思います。どうやるか？

試しました（影響はありませんでした）

Import {MyApp} from '../../app/app.component'; 

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
    public app: any;

    login() {
        ...
        this.app = MyApp;
        this.app.userNow = MyValue;
        ...
    }
}
angularionic2angular-components
6
nauval

それを行うにはいくつかの方法があります。

1）サービスの使用：サービスは通常、アプリケーション内に単一のインスタンスを持ち、コンポーネント間でデータを簡単に共有するために使用できます。例えば。サービスuserServiceを作成し、それを使用したい場所のコンポーネントに挿入します。

2）Emitの使用：Emitは、アプリケーションでイベントを発行するために使用され、対応するアクションを実行できます。

_this.eventInChild.emit(data);
_

イベントの放出に対して2つのアクションを実行できます。

  • 親の関数を呼び出す：

<child-component (eventInChild)="parentFunction($event)"></child-component>

  • サービスからの放出とイベントへのサブスクライブ（コンポーネントだけでなくサービスでもサブスクライブできます）：

稼働中次のようになります。

_getEmitStatus() {
    return this.eventInService;
}

//In component or service - to listen to event

this.subscription = this.userService.getEmitStatus()
    .subscribe(item => {
         //thing to do here
}); 
_
14
SaUrAbH MaUrYa

@SaUrAbHMaUrYaが説明したように、子から親にデータを送信できます。次のようにします。

親

<page-login (on_user_has_logged_in)="userNow = $event"></page-login>

子 ：

import {Output}       from '@angular/core'
import {EventEmitter} from '@angular/core'

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
    @Output() on_user_has_logged_in : EventEmitter<any> = new EventEmitter()

    login(MyValue) {
        this.on_user_has_logged_in.emit(MyValue)
    }
}
5
Hadrien TOMA