Ionic3中能否通过函数获取其他页面数据？NavController注入报错求助

Hey there! Let's tackle your Ionic 3 problem head-on. First, let's address both parts of your question: whether you can fetch data from another page via a function, and how to fix that NavController injection error.

Can you get data from another page using a function? #

Technically, you could do this by instantiating the target page component and calling its methods—but this is strongly not recommended. Ionic pages are Angular components, and they rely on Angular's dependency injection system and their own lifecycle hooks to work properly. When you manually create a page instance, you skip all that setup, which leads to issues like the NavController error you're seeing, plus potential bugs with other dependencies or lifecycle events.

Instead, Ionic/Angular has standard, more reliable ways to share data between pages—let's cover those first, then fix your injection error just in case you still need that approach.

Fixing the NullInjectorError: No provider for NavController! #

This error happens because when you create a page instance manually (like new OtherPage()), Angular's injector can't find a provider for NavController. NavController isn't a global service—it's injected by Ionic specifically when a page is loaded via navigation.

If you absolutely must call a function from another page (again, not recommended), you can manually pass the NavController instance from your current page to the new instance:

// In your current page where you want to call the other page's function
import { NavController } from 'ionic-angular';
import { TargetDataPage } from '../target-data/target-data';

export class YourCurrentPage {
  constructor(private navCtrl: NavController) {}

  fetchDataFromOtherPage() {
    // Pass your current NavController to the other page's constructor
    const targetPage = new TargetDataPage(this.navCtrl);
    const pageData = targetPage.getYourData();
    console.log(pageData);
  }
}

But again, this bypasses Angular's component lifecycle and can cause unexpected issues. Let's look at the right way to share data.

Recommended Ways to Share Data Between Pages #

1. Use a Shared Service (Best for Persistent/Global Data)

Create a dedicated service to hold and manage shared data—this is the standard Angular approach.

First, generate a service (or create it manually):

// src/services/data-share.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class DataShareService {
  private sharedData: any;

  // Set data from any page
  setSharedData(data: any) {
    this.sharedData = data;
  }

  // Get data from any page
  getSharedData() {
    return this.sharedData;
  }
}

Add it to your app.module.ts providers array so it's available app-wide:

// app.module.ts
import { DataShareService } from './services/data-share.service';

@NgModule({
  providers: [DataShareService]
})
export class AppModule {}

Then use it in your pages:

// In the page that has the data (source page)
import { DataShareService } from '../services/data-share.service';

export class SourcePage {
  constructor(private dataService: DataShareService) {}

  saveData() {
    const myData = { username: 'Andres', score: 95 };
    this.dataService.setSharedData(myData);
  }
}

// In the page that needs the data (target page)
import { DataShareService } from '../services/data-share.service';

export class TargetPage {
  constructor(private dataService: DataShareService) {}

  ngOnInit() {
    const fetchedData = this.dataService.getSharedData();
    console.log('Fetched data:', fetchedData);
  }
}

2. Pass Data Via Navigation (Best for One-Time Navigation)

If you're navigating from the source page to the target page, you can pass data directly in the push or setRoot call:

// Source page navigation code
import { NavController } from 'ionic-angular';
import { TargetPage } from '../target/target';

export class SourcePage {
  constructor(private navCtrl: NavController) {}

  goToTargetPage() {
    const myData = { itemId: 123, itemName: 'Sample Item' };
    this.navCtrl.push(TargetPage, { pageData: myData });
  }
}

Then retrieve it in the target page using NavParams:

// Target page
import { NavParams } from 'ionic-angular';

export class TargetPage {
  constructor(private navParams: NavParams) {}

  ngOnInit() {
    const receivedData = this.navParams.get('pageData');
    console.log('Received data:', receivedData);
  }
}

3. Use Ionic Events (Best for Real-Time Updates)

If you need to notify other pages when data changes, use Ionic's Events system:

// Source page - publish an event when data updates
import { Events } from 'ionic-angular';

export class SourcePage {
  constructor(private events: Events) {}

  updateData() {
    const newData = { status: 'Updated', timestamp: Date.now() };
    this.events.publish('data:updated', newData);
  }
}

// Target page - subscribe to the event
import { Events } from 'ionic-angular';

export class TargetPage {
  constructor(private events: Events) {}

  ngOnInit() {
    this.events.subscribe('data:updated', (data) => {
      console.log('Data updated:', data);
    });
  }

  // Don't forget to unsubscribe to avoid memory leaks
  ngOnDestroy() {
    this.events.unsubscribe('data:updated');
  }
}

Final Note #

Stick with shared services, navigation params, or events—these are designed to handle data sharing in Ionic without the headaches of manual component instantiation. The NavController error you hit is a perfect example of why direct page function calls are risky.

内容的提问来源于stack exchange，提问作者Andres Toledo