Service - IONIC 2、Angular 2を使用してコンポーネント間でデータを共有

Question

メソッドを使用して別のページにデータ{{error.value}}を送信する方法はありますか？

これは私がgoToErrors()方法で別のページに{{errors.event}}値を送りたい私のコード

<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, { 
 

 
    }); 
 
    }

です。

ありがとうございます！

編集：私はちょうど私が欲しいものを達成します。コードを編集しました

Answer 1

なぜあなたは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); 
} 
} 

Answer 2

イベントemittorを使用してください。

Answer 3

サービス間で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); 
    } 

設定しerror eventsetError方法を使用してerror componentでerrorを購読parent componentインチ

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

Answer 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']); 
    } 
}