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