Angular 7 - 共享数据

Question

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

我可以只对父子关系中的组件使用@Input和@Output吗？

Answer 1

数据共享通过使用 @Input() 装饰器或 @Output() 和 EventEmitter 来实现，据我所知 :D，我是使用 angular 的新手。

Answer 2

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

Answer 3

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

例如，

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

在parent.component.ts

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

Answer 4

1.如果你想在parent组件和child组件之间进行通信。 => 一世。对于 child

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

里面class 添加 @Input() private dummyData: object; 用于从 parent

获取数据

和

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

并使用

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

this.dataSelected.emit(dataToPass);

二。对于 Parent

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

如果您的组件不相关，有两种方法可以做到这一点。

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

Answer 7

1. Parent-child

如果组件具有 Parent-child 关系

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

例如

在Child组件

@Input() private dataFromParent: object;

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

this.dataToParentE.emit(data);

在Parent

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

2。不相关

我们可以使用共享服务

在 angular 中创建服务添加 getter 和设置器或使用 http

从服务器获取数据

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

constructor( private commonService: CommonService ) {}

Angular 7 - 共享数据

Angular 7 - Sharing Data

angular

angular7