Ionic/Angular2：在Page.ts与Provider.ts间引入中介层的实现方案

Hey there! Adding a mediator layer between your Home component and data provider is such a smart move—it keeps your component clean of data processing logic and makes your code easier to maintain. Let's break down how to get this working smoothly in Angular/Ionic, and troubleshoot the common issues that might be tripping you up.

First, let's clarify the role of each file to keep responsibilities clear:

• Provider.ts: Handles raw data fetching (e.g., loading your JSON file)
• HomeMediator.ts: Takes raw data, processes/optimizes it, and passes it to the component
• Home.ts: Focuses on UI logic—calls the mediator and renders the processed data

1. Update Your Data Provider (Provider.ts) #

This file should only handle fetching the raw JSON, no processing:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataProvider {
  constructor(private http: HttpClient) {}

  // Fetch raw JSON data (adjust the path to match your file location)
  getJson(): Observable<any> {
    return this.http.get('./assets/data/your-data.json');
  }
}

2. Build the Mediator (HomeMediator.ts) #

Inject the provider here, add your data processing logic, and expose a method for the component to call:

import { Injectable } from '@angular/core';
import { DataProvider } from './provider';
import { Observable, map } from 'rxjs';
// For Promise-style (if you prefer avoiding Observables)
import { lastValueFrom } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class HomeMediator {
  constructor(private dataProvider: DataProvider) {}

  // Observable-based method (great for reactive UIs)
  getProcessedJson(): Observable<any[]> {
    return this.dataProvider.getJson().pipe(
      map(rawData => {
        // Add your data processing/optimization logic here
        // Example: Format names, filter items, normalize values
        return rawData.map(item => ({
          id: item.id,
          fullName: `${item.firstName} ${item.lastName}`,
          adjustedScore: item.score * 1.5 // Sample transformation
        }));
      })
    );
  }

  // Promise-based method (if you prefer async/await)
  async getProcessedJsonAsync(): Promise<any[]> {
    const rawData$ = this.dataProvider.getJson();
    const rawData = await lastValueFrom(rawData$);
    
    // Same processing logic as above
    return rawData.map(item => ({
      id: item.id,
      fullName: `${item.firstName} ${item.lastName}`
    }));
  }
}

3. Connect the Mediator to Home.ts #

Call the mediator's method in your component and use the processed data:

import { Component, OnInit } from '@angular/core';
import { HomeMediator } from './home-mediator';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  processedData: any[] = [];

  constructor(private homeMediator: HomeMediator) {}

  ngOnInit() {
    // Option 1: Use Observable with subscribe
    this.homeMediator.getProcessedJson().subscribe({
      next: data => {
        this.processedData = data;
        console.log('Processed data:', data);
      },
      error: err => console.error('Failed to load data:', err)
    });

    // Option 2: Use async/await (uncomment to try)
    // this.loadDataWithAsyncAwait();
  }

  async loadDataWithAsyncAwait() {
    try {
      this.processedData = await this.homeMediator.getProcessedJsonAsync();
    } catch (err) {
      console.error('Failed to load data:', err);
    }
  }
}

4. Template Example (home.page.html) #

Render the processed data in your UI:

<ion-content class="ion-padding">
  <ion-list>
    <ion-item *ngFor="let item of processedData">
      <ion-label>
        <h2>{{ item.fullName }}</h2>
        <p>Adjusted Score: {{ item.adjustedScore }}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

If your code isn't working, check these common issues:

• Dependency Injection Failures: Ensure both DataProvider and HomeMediator have @Injectable({ providedIn: 'root' }) (or are registered in your module's providers array). Without this, Angular can't inject them into your component.
• Incorrect JSON Path: Double-check the path in DataProvider.getJson(). Local JSON files should be in the assets folder, so the path should look like ./assets/data/your-data.json (don't forget the leading dot).
• Data Structure Mismatch: If you're getting errors like map is not a function, your raw JSON might be an object instead of an array. Add a console.log(rawData) in the mediator's map function to inspect the data structure.
• Forgot to Subscribe: Observables don't emit data until you call subscribe(). If you're using the Observable method and nothing happens, make sure you've added the subscribe block.
• Deprecated toPromise: If you're using RxJS 7+, toPromise() is deprecated. Use lastValueFrom or firstValueFrom instead (as shown in the mediator's Promise method).

Instead of manually subscribing, you can use Angular's async pipe in the template to handle subscriptions automatically:

// In Home.ts
processedData$: Observable<any[]>;

ngOnInit() {
  this.processedData$ = this.homeMediator.getProcessedJson();
}

<!-- In home.page.html -->
<ion-item *ngFor="let item of processedData$ | async">
  <!-- ... -->
</ion-item>

This avoids memory leaks from forgotten subscriptions and keeps your component code cleaner.

内容的提问来源于stack exchange，提问作者Rafael de Castro