☰

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

tag-icon • tag-icon angular components shared-data
Angular 2で2つのコンポーネント間でデータを渡す方法 質問する

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

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

ベストアンサー1

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

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

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
 }
}

受信者のコード: このコードはサービスからデータを取得し、データをクリアします。

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

ぜひチェックしてみてくださいファイアシップデモ同じく。役に立ちます。

おすすめ記事