Question

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

例如，我有两个组件Window.Resources和home.ts。我将一些数据传入map.ts并需要在map.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

您可以使用角度2输入将数据传递到组件。例如，在您的子类中，使用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

在组件之间传递数据是一个双向过程。在您的情况下，让我们说home.ts包含一个名为data的对象。

1.在使用home.component.html的{{1}}中，将其替换为<map-component></map-component>。

2.在<map-component [data]="data"></map-component>文件中，添加输入，如：

map.ts

现在您可以在代码中使用它，例如@Input() data: string;

希望它有所帮助！

Answer 4

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

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

如果你想存储你的对象，那么写为

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

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

Answer 5

父级：通过输入共享数据 这可能是共享数据的最常见和最直接的方法。通过使用@Input（）装饰器，它可以通过模板传递数据。

孩子与父母：通过ViewChild共享数据 ViewChild允许将一个组件注入另一个组件，从而使父级可以访问其属性和功能。但要注意的一点是，只有在视图初始化之后才能使用该子级。这意味着我们需要实现AfterViewInit生命周期挂钩，以从子级接收数据。

孩子与父母：通过Output（）和EventEmitter共享数据 共享数据的另一种方法是从子级发出数据，父级可以列出这些数据。当您希望共享在按钮单击，表单整体和其他用户事件等事件上发生的数据更改时，此方法非常理想。

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

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

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

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

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

它将始终返回订阅时的当前值-无需调用onnext 它具有getValue（）函数以将最后一个值提取为原始数据。它确保组件始终接收最新数据。在服务中，我们创建一个私有的BehaviorSubject，它将保存消息的当前值。我们将currentMessage变量定义为可观察到的数据流，以供组件使用。最后，我们创建一个函数，在BehaviorSubject上调用next来更改其值。

父，子和同级组件均受到相同的对待。我们将DataService注入构造函数中，然后订阅可观察的currentMessage并将其值设置为与message变量相等。

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

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

Answer 6

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

示例

home.html的：

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

Answer 7

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

父html：

web

家长ts：

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

儿童HTML：

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

孩子ts：

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

Answer 8

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

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

，然后在组件类中，在要传递的变量之前添加@input：

@input() variableName;

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

8 个答案: