Angular 7 - 共享数据

Question

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

我是否可以仅将@Input和@Output用于子和父关系中的组件？

Answer 1

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

Answer 2

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

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

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

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

Answer 6

如果您的组件不相关，则有双向方式。

1. 使用共享服务
2. 在state中使用状态（角度7.2中的新值），您可以使用路由器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.亲子

如果组件具有父子关系

• qazxsw poi，qazxsw poi，qazxsw poi是不错的选择

例如。

在子组件中

@Input

@Output

EventEmitter

在父母

@Input() private dataFromParent: object;

2.没有关系

我们可以使用共享服务

在angular add getter和setter中创建服务，或使用http从服务器获取数据

在组件（您希望在其中进行数据通信）中，在构造函数中注入此公共服务，并使用服务中的方法来获取或更新数据

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