如何在Angular 2中的两个组件之间传递数据 [英] How to pass data between two components in Angular 2

问题描述

我正在寻找将数据传递到另一个组件并类似地访问另一个组件(都是并行组件)中方法的方法.

I am looking for solution to pass data to another component and similarly access methods of another component in other (both are parallel components).

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

For example i have two components home.ts and map.ts. I get some data into map.ts and need to pass that in home.ts and vice versa.

推荐答案

父级子级:通过输入共享数据 这可能是共享数据的最常见和最直接的方法.通过使用@Input()装饰器，可以通过模板传递数据.

Parent to Child: Sharing Data via Input This is probably the most common and straightforward method of sharing data. It works by using the @Input() decorator to allow data to be passed via the template.

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

Child to Parent: Sharing Data via ViewChild ViewChild allows a one component to be injected into another, giving the parent access to its attributes and functions. One caveat, however, is that child won’t be available until after the view has been initialized. This means we need to implement the AfterViewInit lifecycle hook to receive the data from the child.

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

Child to Parent: Sharing Data via Output() and EventEmitter Another way to share data is to emit data from the child, which can be listed to by the parent. This approach is ideal when you want to share data changes that occur on things like button clicks, form entires, and other user events.

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

In the parent, we create a function to receive the message and set it equal to the message variable.

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

In the child, we declare a messageEvent variable with the Output decorator and set it equal to a new event emitter. Then we create a function named sendMessage that calls emit on this event with the message we want to send. Lastly, we create a button to trigger this function.

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

The parent can now subscribe to this messageEvent that’s outputted by the child component, then run the receive message function whenever this event occurs.

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

Unrelated Components: Sharing Data with a Service When passing data between components that lack a direct connection, such as siblings, grandchildren, etc, you should you a shared service. When you have data that should always been in sync, I find the RxJS BehaviorSubject very useful in this situation.

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

You can also use a regular RxJS Subject for sharing data via the service, but here’s why I prefer a BehaviorSubject.

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

It will always return the current value on subscription - there is no need to call onnext It has a getValue() function to extract the last value as raw data. It ensures that the component always receives the most recent data. In the service, we create a private BehaviorSubject that will hold the current value of the message. We define a currentMessage variable handle this data stream as an observable that will be used by the components. Lastly, we create function that calls next on the BehaviorSubject to change its value.

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

The parent, child, and sibling components all receive the same treatment. We inject the DataService in the constructor, then subscribe to the currentMessage observable and set its value equal to the message variable.

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

Now if we create a function in any one of these components that changes the value of the message. when this function is executed the new data it’s automatically broadcast to all other components.

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

这篇关于如何在Angular 2中的两个组件之间传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！