Ionic 2：自定义提供程序导致“无法解析所有参数”答案

【问题标题】：Ionic 2: custom provider causing "Can't resolve all parameters"Ionic 2：自定义提供程序导致“无法解析所有参数”
【发布时间】：2017-08-12 08:20:32
【问题描述】：

我创建了一个测试提供程序，并尝试将其注入两个页面，以便共享数据和方法，但是当我将提供程序添加到页面构造函数时，我收到一个错误，提示“无法解析CharacterPage 的所有参数：(NavController, NavParams, ?)"。

Ionic Framework: 2.0.1
Ionic Native: 2.4.1
Ionic App Scripts: 1.1.0
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.9.4
OS Platform: Windows 10
Navigator Platform: Win32

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { MyApp } from './app.component';
import { BookNavigation } from '../providers/book-navigation';

@NgModule({
  declarations: [   //STUFF   ],
  imports: [ IonicModule.forRoot(MyApp)  ],
  bootstrap: [IonicApp],
  entryComponents: [  //STUFF ],
  providers: [
    {
    provide: ErrorHandler, 
    useClass: IonicErrorHandler,
    },
    Storage, 
    BookNavigation,
    ]
})
export class AppModule {}

app.components.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { BookNavigation } from '../providers/book-navigation';
import { HomePage } from '../pages/home/home';


@Component({
  templateUrl: 'app.html',
  providers: [BookNavigation]
})
export class MyApp {
  rootPage = HomePage;
  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });

}

characterPage.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { BookNavigation } from '../../providers/book-navigation';

@Component({
  selector: 'page-character',
  templateUrl: 'page.html'
})
export class CharacterPage {

  constructor(public navCtrl: NavController, 
              public navParams: NavParams, 
              public bookNavigation: BookNavigation) {}

}

服务提供商

import { Injectable } from '@angular/core';
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@Injectable()
export class BookNavigation {

  constructor(public navCtrl: NavController, public navParams: NavParams, public storage:Storage) {
    console.log('Hello BookNavigation Provider');
  }

}

【问题讨论】：

可以去掉BookNavigation类的构造函数中的navCtrl和navParams参数吗？您在提供者/服务中不需要这个。
您在CharacterPage 中有错误。这里看不到它的代码
@alltej 不，我无法删除它们，因为图书导航具有让我浏览几页的所有功能。我还必须保留存储引用，因为我正在从本地存储中加载一些值。
@suraj CharachterPage 是这里的页面，我也更改了问题中的名称
" 图书导航具有让我浏览几页的所有功能。"那么你是在 BookNavigation 中导入 CharacterPage 吗？

标签： angular typescript ionic2

【解决方案1】：

这发生在我身上，因为我使用了一个不正确的提供程序，但提供程序没有错误。我从组件中删除了提供程序，一切都很好

【讨论】：

【解决方案2】：

我将把我发现的东西留在这里。显然，将服务用于导航目的不是一个好主意（请参阅此处https://forum.ionicframework.com/t/whats-the-best-practice-if-you-want-to-control-the-navigation-from-a-service/52616/2）。它会导致一系列导致其他问题的错误，所以我决定放弃这个想法。我仍然不确定如何绕过这个问题并且只有一个文件可以设置我的所有数据和方法来保持其余代码的清洁。我已经读到最好的方法可能是通过事件 emmitters，但我仍然对它们了解不够，无法确定

【讨论】：

【解决方案3】：

尝试使用forwardRef。 BookNavigation Service 似乎与某些导入形成了循环依赖关系。在 CharacterPage 中，

 constructor(public navCtrl: NavController, 
              public navParams: NavParams, 
              public @Inject(forwardRef(() =>BookNavigation)bookNavigation: BookNavigation) {}

【讨论】：