如何在 Angular 2 中的两个组件之间传递数据

Question

我正在寻找将数据传递到另一个组件的解决方案，以及类似地访问其他组件中另一个组件的方法（两者都是并行组件）。

例如，我有两个组件 home.ts 和 map.ts。我将一些数据输入 map.ts 并需要将其传递到 home.ts 中，反之亦然。

Answer 1

在 Angular2 中，您可以通过在 html 中传递对象来在两个组件之间进行通信。

示例

home.html:

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

Answer 2

您可以使用 angular 2 个输入将数据传递到组件。例如，在您的 child class 中，使用 angular 2 @Input 装饰器创建一个输入变量。

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

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

在您的 parent 组件中（即您调用 child 组件的地方，按如下方式传递您的参数：

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

我建议您阅读这篇关于在组件之间传递和接收参数的文章 (https://toddmotto.com/passing-data-angular-2-components-input)。

Answer 3

在组件之间传递数据是一个双向过程。在您的例子中，假设 home.ts 包含一个名为 data 的对象。

1.In home.component.html ，您使用 <map-component></map-component> 的地方，将其替换为 <map-component [data]="data"></map-component>.

2.In map.ts 文件，添加如下输入：

@Input() data: string;

现在您可以像 <p>{{data.title}}</p>

希望对您有所帮助！

Answer 4

使用sessionStorage，在angular你想设置数据的地方写成

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

如果你想存储你的对象然后写成

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

然后是你想要获得正确值的组件 sessionStorage.getItem("key") 或整个对象 JSON.parse(sessonStorage.getKey("key");

Answer 5

在Angular 4中使用@Input 在parent和child之间共享一个object。在这里，对 megmor（在 parent 中）或 radfal（在 child 中）的更改将反映在另一个中。

Parent html:

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

Parent ts:

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

Child html:

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

Child 时间：

@Input() radfal: Kreven;

Answer 6

You can transfer data using service.

制作一个在您切换组件时保存数据的服务。下面是一个例子。

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

You should check out Fireship Demo for the same. It's helpful.

Answer 7

Parent 到 Child：通过输入共享数据 这可能是最常见和最直接的数据共享方法。它通过使用 @Input() 装饰器来允许通过模板传递数据来工作。

Child 到 Parent：通过视图共享数据Child ViewChild 允许将一个组件注入到另一个组件中，使 parent 可以访问其属性和功能。但是，需要注意的是 child 在视图初始化之前不可用。这意味着我们需要实现 AfterViewInit 生命周期钩子来接收来自 child.

的数据

Child 到 Parent：通过 Output() 和 EventEmitter 共享数据 另一种共享数据的方法是从 child 发出数据，这些数据可以被 parent 列出。当您想要共享发生在按钮点击、表单填写和其他用户事件上的数据更改时，这种方法是理想的选择。

在parent中，我们创建了一个接收消息的函数，并将其设置为等于消息变量。

在 child 中，我们使用 Output 装饰器声明了一个 messageEvent 变量，并将其设置为等于一个新的事件发射器。然后我们创建一个名为 sendMessage 的函数，它使用我们要发送的消息调用此事件的 emit。最后，我们创建一个按钮来触发这个功能。

parent 现在可以订阅由 child 组件输出的这个 messageEvent，然后运行每当这个事件发生时接收消息函数。

不相关的组件：与服务共享数据 在缺乏直接连接的组件之间传递数据时，例如兄弟姐妹、grandchildren 等，您应该使用共享服务。当您拥有应该始终同步的数据时，我发现 RxJS BehaviorSubject 在这种情况下非常有用。

您也可以使用常规的 RxJS Subject 通过服务共享数据，但这就是我更喜欢 BehaviorSubject 的原因。

它将始终 return 订阅的当前值 - 无需调用 onnext 它有一个 getValue() 函数来提取最后一个值作为原始数据。它确保组件始终接收最新的数据。在服务中，我们创建了一个私有的 BehaviorSubject 来保存消息的当前值。我们定义一个 currentMessage 变量来处理这个数据流作为一个将被组件使用的可观察对象。最后，我们创建函数调用 BehaviorSubject 的 next 来改变它的值。

parent、child 和兄弟组件都接受相同的处理。我们在构造函数中注入 DataService，然后订阅 currentMessage observable 并将其值设置为等于消息变量。

现在，如果我们在这些组件中的任何一个中创建一个函数来更改消息的值。当执行此函数时，新数据会自动广播到所有其他组件。

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

Answer 8

在 Angular 中，您可以使用 @Input 在组件之间共享数据。首先你应该从@angular/core导入输入：

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

然后在组件class中，在要传递的变量前添加@input:

@input() variableName;

如何在 Angular 2 中的两个组件之间传递数据

How to pass data between two components in Angular 2

components

shared-data

angular