在Angular 7中组件之间共享数据的最佳方法是什么?
我是否可以仅将@Input和@Output用于子和父关系中的组件?
如果您的组件不相关,则有两种解决方案:您可以使用共享服务(使用observable),也可以使用ngrx / store。
数据共享通过使用@Input()
装饰器或@Output()
和EventEmitter
工作,据我所知:D,我是使用角度的新手。
您也可以直接在另一个组件中使用一个函数。
例如,
注入之后,您可以在父组件中使用childComponent的函数。
在parent.component.ts中
@ViewChild(childComponent) childComponentRef: childComponent;
this.childComponentRef.myFunc();
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
您可以通过以下方式共享数据的最佳方式:
input()
装饰器进行父子共享数据。@ViewChild()
和output()
装饰器进行子父共享数据。EventEmitter
用于子女父母共享数据。如果您的组件不相关,则有双向方式。
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 ;
});
1.亲子
如果组件具有父子关系
例如。
在子组件中
@Input
@Output
EventEmitter
在父母
@Input() private dataFromParent: object;
2.没有关系
我们可以使用共享服务
在angular add getter和setter中创建服务,或使用http从服务器获取数据
在组件(您希望在其中进行数据通信)中,在构造函数中注入此公共服务,并使用服务中的方法来获取或更新数据
@Output() dataToParentE = new EventEmitter<Event>();