使用服務在組件之間共享數據 - IONIC 2，Angular 2

Question

有什麼方法可以使用方法將數據{{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, { 
 

 
    }); 
 
    }

我想了{{errors.event}}值發送到另一個頁面的goToErrors()方法。

謝謝！

編輯：我只是實現我想要的。我編輯了代碼

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

使用事件發射器。

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

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

設置使用setError方法和訂閱在error component的errorerror event在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']); 
    } 
}