使用服务在组件之间共享数据 - IONIC 2、Angular 2答案

【问题标题】：Share data between components using Service - IONIC 2, Angular 2使用服务在组件之间共享数据 - IONIC 2、Angular 2
【发布时间】：2017-08-25 17:53:02
【问题描述】：

有没有什么方法可以使用方法将数据{{error.value}}发送到另一个页面？

这是我的代码

<ion-row *ngFor="let errors of adp_principal_menuRS">
          <ion-col class="info-col" col-4>
            <button ion-button color="primary" small (click)="goToErrors(errors.event)">
              {{errors.event}}
            </button>
          </ion-col>
</ion-row>

goToErrors(menu: string){
    console.log(menu);
    this.navCtrl.push(AdpDetailPage, {

    });
  }

我想在goToErrors() 方法中将{{errors.event}} 值发送到另一个页面。

谢谢！

编辑：我只是实现了我想要的。我编辑了代码

【问题讨论】：

goToErrors() 将导航到另一个页面？
是的，我想在那个页面中使用errors.event的值。

标签： html angular ionic2 angular2-services

【解决方案1】：

可以通过服务在组件之间使用BehaviorSubject 共享数据。这是一个例子：

// service.ts
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class ShareService {
    private errorSource = new BehaviorSubject<any>(null);
    error$ = this.errorSource.asObservable();

    setError(error: any){
        this.errorSource.next(error);
    }

使用setError方法在parent component中设置error event，并在error component中订阅error。

  // error component.ts
  constructor(share: ShareService) {
        share.error$.subscribe(Err => this.error = Err);

【讨论】：

我有点困惑。我的数据来自一个服务，我需要创建另一个服务来将我需要的数据共享到另一个页面？
新服务的需求取决于服务的范围。如果数据共享组件和数据获取服务都在同一个模块内，则不需要新服务。errorSource BehaviorSubject可以在同一个服务中实现，用于获取数据。

【解决方案2】：

为什么不使用navParam 发送值？

goToErrors(menu: string){
    console.log(menu);
    this.navCtrl.push(AdpDetailPage, {
       errorEvent: menu  // <------------------------- Add this line
    });
  }

在你的AdpDetailPage:

export class AdpDetailPage{
 constructor(public navParams: NavParams){

   errorEvent = this.navParams.get('errorEvent');
   console.log("errorEvent= ", errorEvent);
 }
}

【讨论】：

【解决方案3】：

使用事件发射器。

//Home component.ts import { Events } from 'ionic-angular'; constructor(public events: Events) {} directioChange(user) {this.events.publish('directiochanged', 'true');} //App.component.ts constructor(public events: Events) { events.subscribe('directiochanged', (direction) => { this.isRtl = direction;console.log(direction);});}

【讨论】：

根据您的要求更改

【解决方案4】：

我生成了一个 Plunker，希望它与您正在尝试做的事情相匹配。

https://plnkr.co/edit/MNqpIqJjp5FN30bJd0RB?p=preview

服务

import { Injectable } from '@angular/core';

@Injectable()
export class ErrorService {
  errorInfo: string;
}

组件

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="goToErrors()">{{errors.event}} </button>
      <router-outlet></router-outlet>
    </div>
  `,
})
export class App {
  name:string;
  errors = { event: 'Test Error', otherInfo: 'Test Info' };

  constructor(private errorService: ErrorService, private router: Router) {
    this.name = `Angular! v${VERSION.full}`
  }

  goToErrors(): void {
    // Code to navigate to the other component
    this.errorService.errorInfo = this.errors.event;
    this.router.navigate(['/a']);
  }
}

【讨论】：