如何在Angular 2中的兩個組件之間傳遞數據

Question

我正在尋找將數據傳遞給另一個組件的解決方案，以及類似地訪問其他組件中另一個組件的方法（兩者都是並行組件）。

例如，我有兩個組件home.ts和map.ts 。 我將一些數據放入map.ts並需要在home.ts中傳遞，反之亦然。

Answer 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 個組件 Sender 和 Reciever。

發送者代碼：此代碼將數據設置到服務並導航到接收者。

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

您應該查看Fireship Demo以獲得相同的效果。 這很有幫助。

Answer 2

您可以使用 angular 2 Inputs 將數據傳遞給組件。 例如，在您的子類中，使用 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 )。

Answer 3

父母對孩子：通過輸入共享數據這可能是最常見和最直接的數據共享方法。 它通過使用 @Input() 裝飾器來允許通過模板傳遞數據。

Child to Parent：通過 ViewChild 共享數據ViewChild 允許將一個組件注入到另一個組件中，從而使父級可以訪問其屬性和功能。 然而，一個警告是，在視圖初始化之前，孩子將不可用。 這意味着我們需要實現 AfterViewInit 生命周期鈎子來接收來自孩子的數據。

Child to Parent：通過 Output() 和 EventEmitter共享數據 另一種共享數據的方法是從 child 發出數據，這些數據可以由 parent 列出。 當您想要共享發生在按鈕單擊、表單整體和其他用戶事件等事件上的數據更改時，這種方法是理想的選擇。

在父級中，我們創建一個函數來接收消息並將其設置為等於消息變量。

在子進程中，我們使用 Output 裝飾器聲明了一個 messageEvent 變量，並將其設置為一個新的事件發射器。 然后我們創建一個名為 sendMessage 的函數，該函數使用我們要發送的消息在此事件上調用 emit。 最后，我們創建一個按鈕來觸發此功能。

父組件現在可以訂閱子組件輸出的這個 messageEvent，然后在該事件發生時運行接收消息函數。

不相關的組件：與服務共享數據在缺少直接連接的組件之間傳遞數據時，例如兄弟姐妹、孫輩等，您應該使用共享服務。 當您擁有應該始終同步的數據時，我發現 RxJS BehaviorSubject 在這種情況下非常有用。

您還可以使用常規的 RxJS 主題通過服務共享數據，但這就是我更喜歡 BehaviorSubject 的原因。

它總是會在訂閱時返回當前值 - 無需調用 onnext 它有一個 getValue() 函數來提取最后一個值作為原始數據。 它確保組件始終接收最新數據。 在服務中，我們創建一個私有的 BehaviorSubject 來保存消息的當前值。 我們定義了一個 currentMessage 變量，將這個數據流作為一個 observable 來處理，供組件使用。 最后，我們創建函數調用 BehaviorSubject 上的 next 以更改其值。

父組件、子組件和兄弟組件都接受相同的處理。 我們在構造函數中注入 DataService，然后訂閱 currentMessage observable 並將其值設置為等於 message 變量。

現在，如果我們在這些組件中的任何一個中創建一個函數來更改消息的值。 當執行此函數時，新數據會自動廣播到所有其他組件。

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

Answer 4

在組件之間傳遞數據是一個雙向過程。 在您的情況下，假設home.ts包含一個名為data的對象。

1.在使用<map-component></map-component>的home.component.html中，將其替換為<map-component [data]="data"></map-component> 。

2.在map.ts文件中，添加如下輸入：

@Input() data: string;

3. 現在您可以在代碼中使用它，例如<p>{{data.title}}</p>

希望能幫助到你！

Answer 5

在要設置數據的角度使用 sessionStorage，將其寫入為

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

如果你想存儲你的對象然后寫成

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

然后是要獲取正確值的組件sessionStorage.getItem("key")或整個對象JSON.parse(sessonStorage.getKey("key");

Answer 6

在 Angular2 中，您可以通過在 html 中傳遞對象來在兩個組件之間進行通信。

例子

主頁.html：

...
<map_selector [ObjectInMap]="ObjectInHome" ></map_selector>
...

Answer 7

在 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;

Answer 8

在 Angular 中，您可以使用 @Input 在組件之間共享數據。 首先，您應該從 @angular/core 導入輸入：

import { input } form '@angular/core';

然后在組件類中在要傳遞的變量之前添加@input：

@input() variableName;