Angular 7 - 共享数据

问题描述 投票:4回答:7

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

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

angular angular7
7个回答
4
投票

如果您的组件不相关,则有两种解决方案:您可以使用共享服务(使用observable),也可以使用ngrx / store。


1
投票

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


0
投票

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

例如,

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

在parent.component.ts中

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

0
投票

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


0
投票

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

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

0
投票

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

  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 ;
});

0
投票

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>();

© www.soinside.com 2019 - 2024. All rights reserved.