26

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

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

4

8 回答 8

52

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

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

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以获得相同的效果。这很有帮助。

于 2017-11-18T01:15:17.120 回答
18

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

于 2016-09-05T08:35:36.043 回答
12

父母对孩子：通过输入共享数据 这可能是最常见和最直接的数据共享方法。它通过使用 @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/

于 2018-12-19T04:33:48.857 回答
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>

希望能帮助到你！

于 2016-12-23T15:40:05.623 回答
4

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

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

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

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

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

于 2017-07-25T20:53:08.457 回答
1

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

例子

主页.html：

...
<map_selector [ObjectInMap]="ObjectInHome" ></map_selector>
...
于 2016-09-05T08:04:34.860 回答
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;
于 2017-10-14T03:14:35.747 回答
0

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

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

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

@input() variableName;
于 2020-06-08T16:32:47.967 回答