web-dev-qa-db-ja.com

Angular 2の2つのコンポーネント間でデータを渡す方法

データを別のコンポーネントに渡し、他のコンポーネントのメソッドに同様にアクセスするソリューションを探しています（両方とも並列コンポーネントです）。

たとえば、home.tsとmap.tsの2つのコンポーネントがあります。 map.tsにデータを取得し、home.tsに渡す必要があります。

angularcomponentsshared-data
19
Ajay Dubey

サービスを使用してデータを転送できます。

コンポーネントを切り替える間、データを保持するサービスを作成します。以下に例を示します。

import { Injectable } from '@angular/core';

@Injectable()
export class TransfereService {

  constructor(
    private router:Router,
    private companyServiceService:CompanyServiceService
  ) { }

  private data;

  setData(data){
    this.data = data;
  }

  getData(){
    let temp = this.data;
    this.clearData();
    return temp;
  }

  clearData(){
    this.data = undefined;
  }

}

次に、送信者と受信者の2つのコンポーネントを考えます。

送信者コード：このコードは、データをサービスに設定し、受信者に移動します。

import { Router } from '@angular/router';
import { TransfereService } from './services/transfer.service';

export class SenderComponent implements OnInit {         
  constructor(
    private transfereService:TransfereService,
    private router:Router) {}

  somefunction(data){
   this.transfereService.setData(data);
   this.router.navigateByUrl('/reciever');//as per router
 }
}

Reciever's Code：このコードは、サービスからデータを取得し、データもクリアします。

import { Router } from '@angular/router';
import { TransfereService } from './services/transfer.service';

export class RecieverComponent implements OnInit {  
 data = this.transfereService.getData();       
 constructor(
   private transfereService:TransfereService,
   private router:Router) {
      if(this.data){
        // do whatever needed
      }
      else{
        this.router.navigateByUrl('/sender');
      }
   }
}

同じことを Fireship Demo で確認してください。役に立ちます。

31
Abhijit Srivastava

コンポーネントにデータを渡すためにangular 2入力を使用できます。たとえば、子クラスで、angular 2 @Inputデコレータを使用して入力変数を作成します。

import {Component, Input} from 'angular2/core';

@Component({
  selector: 'child',
  styles: [`
  `],
  template: `
  `
})
export class ChildComponent {
  @Input() valueToPass = 0;
}

親コンポーネント（つまり、子コンポーネントを呼び出しているコンポーネント）で、次のようにパラメーターを渡します。

<child [valueToPass] = "value"></child>

コンポーネント間の引数の受け渡しに関するこの記事を読むことをお勧めします（ https://toddmotto.com/passing-data-angular-2-components-input ）。

17
Noor Ahmed

コンポーネント間のデータの受け渡しは、双方向のプロセスです。あなたの場合、home.tsにdataという名前のオブジェクトが含まれているとします。

1. home.component.htmlを使用した<map-component></map-component>で、<map-component [data]="data"></map-component>に置き換えます。

2. map.tsファイルで、次のような入力を追加します。

@Input() data: string;
  1. これで、コードで<p>{{data.title}}</p>のように使用できます

それが役に立てば幸い！

9
Abhishek Kulshrestha

データを設定するangularでsessionStorageを使用します。

sessionStorage.setItem("key","value");

オブジェクトを保存する場合は、次のように記述します

sessionStorage.setItem("key", JSON.stringify(obj));

次に、正しい値を取得するコンポーネントsessionStorage.getItem("key")またはオブジェクト全体JSON.parse(sessonStorage.getKey("key");

5
Akshay Srivastava

親から子：入力を介したデータの共有これは、おそらく最も一般的で簡単なデータ共有方法です。 @Input（）デコレータを使用して機能し、テンプレートを介してデータを渡すことができます。

子から親へ：ViewChildを介したデータの共有ViewChildは、1つのコンポーネントを別のコンポーネントにインジェクトし、親にその属性と機能へのアクセスを許可します。ただし、1つの注意点は、ビューが初期化されるまで子は利用できないことです。つまり、子からデータを受信するには、AfterViewInitライフサイクルフックを実装する必要があります。

子から親へ：Output（）およびEventEmitterを介したデータの共有データを共有するもう1つの方法は、子からデータを発行することです。親。この方法は、ボタンのクリック、フォーム全体、その他のユーザーイベントなどで発生したデータの変更を共有する場合に理想的です。

親で、メッセージを受信する関数を作成し、メッセージ変数に等しく設定します。

子では、OutputデコレータでmessageEvent変数を宣言し、それを新しいイベントエミッタに等しく設定します。次に、sendMessageという名前の関数を作成します。この関数は、送信するメッセージとともにこのイベントで発行を呼び出します。最後に、この機能をトリガーするボタンを作成します。

親は、子コンポーネントによって出力されるこのmessageEventをサブスクライブし、このイベントが発生するたびにメッセージ受信機能を実行できるようになりました。

無関係なコンポーネント：サービスとのデータの共有兄弟、孫など、直接接続のないコンポーネント間でデータを渡す場合は、共有する必要がありますサービス。常に同期する必要があるデータがある場合、この状況ではRxJS BehaviorSubjectが非常に役立つことがわかります。

通常のRxJS Subjectを使用してサービス経由でデータを共有することもできますが、BehaviorSubjectを好む理由は次のとおりです。

サブスクリプションでは常に現在の値を返します-onnextを呼び出す必要はありません。最後の値を生データとして抽出するgetValue（）関数があります。コンポーネントが常に最新のデータを受信するようにします。サービスでは、メッセージの現在の値を保持するプライベートBehaviorSubjectを作成します。 currentMessage変数を定義して、このデータストリームをコンポーネントが使用するオブザーバブルとして処理します。最後に、BehaviorSubjectでnextを呼び出して値を変更する関数を作成します。

親、子、および兄弟コンポーネントはすべて同じ扱いを受けます。コンストラクターにDataServiceを注入し、observableのcurrentMessageにサブスクライブして、その値をメッセージ変数と等しく設定します。

これらのコンポーネントのいずれかでメッセージの値を変更する関数を作成した場合。この関数が新しいデータを実行すると、他のすべてのコンポーネントに自動的にブロードキャストされます。

参照： https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

3
Vinayak Savale

Angular2では、htmlでオブジェクトを渡すことにより、2つのコンポーネント間で通信できます。

例

home.html：

...
<map_selector [ObjectInMap]="ObjectInHome" ></map_selector>
...
2
Marco Castano

Angular 4では、@ Inputを使用して、親と子の間のオブジェクトを共有にします。ここでは、Megmor（親の場合）またはradfal（子の場合）に対する変更が、もう一方に反映されます。

親HTML：

<div>   
  <zoptil [radfal]="megmor"></zoptil>
  {{megmor.pergal}}
</div>

親ts：

let megmor = new Kreven();
this.megmor.pergal = "warbar";

子HTML：

<div>
  <h2>{{radfal.pergal}}</h2>
  <label>Peragl: </label>
  <input [(ngModel)]="radfal.pergal" />
</div>

子ts：

@Input() radfal: Kreven;
0
unqualified