Angular 7 - 共享数据答案

【问题标题】：Angular 7 - Sharing DataAngular 7 - 共享数据
【发布时间】：2018-12-05 09:11:02
【问题描述】：

在 Angular 7 中的组件之间共享数据的最佳方式是什么？

我可以只将 @Input 和 @Output 用于具有子父关系的组件吗？

【问题讨论】：

欢迎来到 StackOverflow。请take the tour阅读What topics can I ask about和What topics to avoid和How to ask a good question和the perfect question以及如何创建Minimal, Complete and Verifiable Example。

标签： angular angular7

【解决方案1】：

如果你的组件不相关，有两种解决方案：你可以使用共享服务（使用 observable）或者你可以使用ngrx/store。

【讨论】：

【解决方案2】：

您可以通过以下方式共享数据的最佳方式：

使用 input() 装饰器进行父子共享数据。
使用 @ViewChild() 和 output() 装饰器来共享数据。
还有EventEmitter 用于孩子父母共享数据。
对于不相关的组件，您可以使用与服务共享数据。

【讨论】：

【解决方案3】：

据我所知，数据共享通过使用 @Input() 装饰器或 @Output() 和 EventEmitter 进行工作：D，我是使用 angular 的新手。

【讨论】：

【解决方案4】：

你也可以直接在另一个组件中使用一个函数。

例如，

注入后，您可以在父组件中使用 childComponent 的函数。

在parent.component.ts

中

@ViewChild(childComponent) childComponentRef: childComponent;
this.childComponentRef.myFunc();

【讨论】：

【解决方案5】：

1.如果你想在父组件和子组件之间进行通信。 => 一世。给孩子

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";

课内添加 @Input() private dummyData: object; 用于从父级获取数据

和

@Output() dataSelected = new EventEmitter<Event>();

并发出一个事件，其中包含要传递给父级的数据

this.dataSelected.emit(dataToPass);

二。给家长

在组件 div 中

<child-comp [dummyData]='dummyData' (dataSelected)="dataSelected($event)></child-comp>

2。如果你想在同级组件之间进行通信

=> 使用共享服务方式进行通信创建具有有用功能的服务，并将该服务导入您希望发生通信的组件中。

有关此类通信的更多信息，请参阅此 URL： http://jasonwatmore.com/post/2018/06/25/angular-6-communicating-between-components-with-observable-subject

【讨论】：

【解决方案6】：

如果您的组件不相关，则有两种方法。

使用共享服务
使用状态（Angular 7.2 中的新功能）在state, 您可以使用状态参数传递数据使用路由器 this.router.navigate(['/'], { state: { data: 'value' } });

或RouterLink

<a routerLink="/" [state]="{ data: 'value' }">Click here</a>

并在NavigationStart事件中捕获数据

router.events.pipe(filter(e => e instanceof NavigationStart)).subscribe(e => {
  const navigation = router.getCurrentNavigation();
  const data = navigation.extras.state.data ;
});

【讨论】：

【解决方案7】：

1.亲子

如果组件具有父子关系

@Input、@Output、EventEmitter 是不错的选择

例如。

在子组件中

@Input() private dataFromParent: object;

@Output() dataToParentE = new EventEmitter<Event>();

this.dataToParentE.emit(data);

在父母中

<child-comp [dataFromParent]='dataFromParent' (dataToParentE)="dataToParentE($event)></child-comp>

2。不相关

我们可以使用共享服务

在 Angular 添加 getter 和 setter 中创建服务或使用 http 从服务器获取数据

并且在组件中（你要在其中进行数据通信）在构造函数中注入这个公共服务，并使用服务中的方法来获取或更新数据

constructor( private commonService: CommonService ) {}

【讨论】：