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

问题描述 投票：19回答：7

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

例如，我有两个组件home.ts和map.ts。我得到一些数据到map.ts，需要在home.ts传递，反之亦然。

angular components shared-data
7个回答
30
投票

您可以使用服务传输数据。

在切换组件时创建保存数据的服务。以下是一个例子。

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和Receiver。

发件人代码：此代码将数据设置为服务并导航到接收者。

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相同。这很有帮助。

17
投票

您可以使用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）。

9
投票

在组件之间传递数据是一个双向过程。在你的情况下，让我们说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>

希望能帮助到你！

5
投票

使用sessionStorage，在您想要设置数据的角度中将其写为

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

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

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

那么你想要得到正确的值sessionStorage.getItem("key")或整个对象JSON.parse(sessonStorage.getKey("key");的组件

3
投票

父对子：通过输入共享数据这可能是共享数据最常用，最直接的方法。它的工作原理是使用@Input（）装饰器来允许数据通过模板传递。

Child to Parent：通过ViewChild共享数据ViewChild允许将一个组件注入另一个组件，使父组件可以访问其属性和功能。然而，有一点需要注意，在视图初始化之后，孩子将无法使用。这意味着我们需要实现AfterViewInit生命周期钩子来接收来自子节点的数据。

子到父：通过Output（）和EventEmitter共享数据另一种共享数据的方法是从子进行数据发送，父进程可以列出数据。当您想要共享按钮点击，表单输入和其他用户事件等事件时发生的数据更改时，此方法非常理想。

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

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

父级现在可以订阅由子组件输出的此messageEvent，然后在发生此事件时运行接收消息功能。

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

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

它总是会在订阅时返回当前值 - 不需要调用onnext它有一个getValue（）函数来提取最后一个值作为原始数据。它确保组件始终接收最新数据。在服务中，我们创建一个私有的BehaviorSubject，它将保存消息的当前值。我们定义一个currentMessage变量来处理这个数据流作为组件将使用的observable。最后，我们创建在BehaviorSubject上调用next的函数来更改其值。

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

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

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

2
投票

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

例

home.html的：

...
<map_selector [ObjectInMap]="ObjectInHome" ></map_selector>
...
0
投票

在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;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.