Question

你好我在角度2制作应用程序，我有一个名为test-summary.component的组件和另一个组件report.component，在运行我的应用程序时，我在两个选项卡上有两个组件，我想传递更新的数据来自test-summary.component到report.component，那个数据应该实时反映到report.component ..我已经尝试了很多使用subject，SubjectBehavior但我不能..Plz有些人可以帮忙..？

Answer 1

使用事件验证器来跨组件在组件之间传输数据

//test-summary.component import { Events } from 'ionic-angular'; constructor(public events: Events) {} dataupdate(user) {this.events.publish('realtimereport', realtimedata);} //report.component constructor(public events: Events) { events.subscribe('realtimereport', (realtimedata) => { this.chartData = realtimedata;console.log(realtimedata);});}

你可以在项目的任何地方使用它

Answer 2

一个解决方案可能是使用服务来保存公共数据。

两个组件都可以引用相同的服务变量。

如果一个组件更新变量，则更改将自动反映在另一个组件中。

Answer 3

您所做的是使用@Input和@Output（https://angular.io/guide/component-interaction）。显示选项卡的父页面可以是您的通信。

在test-summary.component中：

export class Summary{
@Output() sumbitReport = new EventEmitter<any>();

someMethod(){
this.sumbitReport.emit(yourReport);

在您的report.component中：

export class Report{
@Input() report: any;

然后在您的父组件中：

tabMethod(){
this.summaryReportTab= true;

parentDoSomethingWithReport(report: any){ // get from summary
this.parentReport = report; // pass to report component

在您的父模板中：

<summary *ngIf="summaryReportTab" (sumbitReport)="parentDoSomethingWithReport($event)">></summary>
<report *ngIf="reportTab" [report]="parentReport"></report>

Angular 2，实时访问数据

3 个答案: