Question

**所以，我的主菜单上有app.html，我想添加（点击）=＆＃34; page（）＆＃34;链接，但我不能发生错误：

错误：StaticInjectorError [NavController]： StaticInjectorError [NavController]： NullInjectorError：没有NavController的提供者！

所有项目：https://github.com/AndriusdevLa/test

<ion-nav [root]="rootPage" #mainNav></ion-nav>
<ion-menu [content]="mainNav" type="overlay">
  <ion-content>
   <ion-list>
      <ion-item menuClose>
        <ion-buttons right>
        <button ion-button>
        <ion-icon name="close"></ion-icon>
        </button>
        </ion-buttons>
      </ion-item>
      <ion-item><button ion-button (click)="menuProfile()">Fails</button></ion-item>
      <ion-item>Profile</ion-item>
      <ion-item>Messeges</ion-item>
      <ion-item>Support</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

app.component.ts：

import { Component } from '@angular/core';
import { NavController, Platform} from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LoginPage } from "../pages/login/login";

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = LoginPage;


  constructor(public navCtrl : NavController,
    platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {


    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();
    });
  }
  menuProfile(){
    this.navCtrl.push('ProfilePage');
  }

}

如何解决？

Answer 1

错误具有描述性， NullInjectorError: No provider for NavController!

您需要在 NavController

中的 providers 中添加 app.module.ts

Answer 2

由于我没有所有的组件引用，我无法测试它。但代码似乎没问题。问题不在于（点击）事件和功能。您可以调试它并测试调试器是否命中该函数。但是我已经最小化了你的代码并使用了标准输入控件并对其进行了测试，它的工作正常，因此要么提供代码中引用的所有组件，要么尽可能地尽量减少代码并共享代码。

这里我测试了你的问题 -

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'test-dev-problem',
  templateUrl: './test-dev-problem.component.html',
  styleUrls: ['./test-dev-problem.component.css']
})
export class TestDevProblemComponent implements OnInit {

  navCtrl = '';
  constructor() { }

  ngOnInit() {
  }

  menuProfile() {
    this.navCtrl = 'ProfilePage';
  }

}

HTML： -

<div>
  <input type="button" value="ClickMe" (click)="menuProfile()">
  <input type="text" value="{{navCtrl}}">
</div>

在按钮上单击其在文本框中显示值。

Answer 3

注意：在ionic 3声明式Nav中用作；

@ViewChild(Nav) navCtrl: Nav;

因此，无需导入任何内容，您就可以导航

this.navCtrl.push(this.mypage);

离子2

文档263中有一个名为“从根组件导航”的部分，内容为：

如果要从根应用程序组件控制导航怎么办？您无法注入NavController，因为任何作为导航控制器的组件都是根组件的子组件，因此无法进行注入。

通过向ion-nav添加参考变量，可以使用@ViewChild来获取Nav组件的实例，该组件是导航控制器（它扩展了NavController）：

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
   template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
   @ViewChild('myNav') nav: NavController
   public rootPage = TabsPage;
   // Wait for the components in MyApp's template to be initialized
   // In this case, we are waiting for the Nav with reference variable of "#myNav"
   ngOnInit() {
      // Let's navigate from TabsPage to Page1
      this.nav.push(Page1);
   }
}

Angular 5 app.component无法添加NavController

3 个答案: