Question

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

我只能将 @Input 和 @Output 用于与孩子和父母有关系的组件吗？

Answer 1

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

Answer 2

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

Answer 3

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

例如

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

在 parent.component.ts

中

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

Answer 4

1。如果要在父组件和子组件之间进行通信。 => 一世。对于孩子

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

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

和

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

并发出一个事件，该事件包含要使用的数据

this.dataSelected.emit(dataToPass);

ii。对于父母

在组件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

Answer 5

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

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

Answer 6

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

使用共享服务
使用状态（角度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 ;
});

Answer 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 add getter和setters创建服务，或者使用http从服务器获取数据

然后在组件（您要在其中进行数据通信）中，将此通用服务注入构造函数中，并使用服务中的方法获取或更新数据

constructor( private commonService: CommonService ) {}

Angular 7-共享数据

7 个答案: