Ионный 2: ИСКЛЮЧЕНИЕ: Нет провайдера для NavController

Question

У меня проблема с моим ионным 2/угловым 2 приложением.

У меня есть приложение, где часть отверстия «auth» реализована.

код выглядит следующим образом:

import {Nav, Platform, Modal, ionicBootstrap} from "ionic-angular"; 
import {NavController} from "ionic-angular/index"; 
import {StatusBar} from "ionic-native"; 
import {Component, ViewChild} from "@angular/core"; 
import {AngularFire, FirebaseListObservable, FIREBASE_PROVIDERS, defaultFirebase} from "angularfire2"; 
import {HomePage} from "./pages/home/home"; 
import {AuthPage} from "./pages/auth/home/home"; 

@Component({ 
    templateUrl: "build/app.html", 
}) 

class MyApp { 
    @ViewChild(Nav) nav: Nav; 

    authInfo: any; 
    rootPage: any = HomePage; 
    pages: Array<{title: string, component: any}>; 

    constructor(private platform: Platform, private navCtrl: NavController, private af: AngularFire) { 
    this.initializeApp(); 

    this.pages = [ 
     { title: "Home", component: HomePage } 
    ]; 

    } 

    initializeApp() { 
    this.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(); 
    }); 
    } 

    openPage(page) { 
    this.nav.setRoot(page.component); 
    } 

    ngOnInit() { 
    this.af.auth.subscribe(data => { 
     if (data) { 
     this.authInfo = data; 
     } else { 
     this.authInfo = null; 
     this.showLoginModal(); 
     } 
    }); 
    } 

    logout() { 
    if (this.authInfo) { 
     this.af.auth.logout(); 
     return; 
    } 
    } 

    showLoginModal() { 
    let loginPage = Modal.create(AuthPage); 
    this.navCtrl.present(loginPage); 
    } 
} 

Но теперь, когда я пытаюсь запустить приложение я получаю сообщение:

ORIGINAL EXCEPTION: No provider for NavController 

У вас есть какие-либо идеи, как решить эту проблему? Благодаря!

Answer 1

Вы неправильно указали свой навигатор;

this.nav.setRoot(page.component); 

Должен быть

this.navCtrl.setRoot(page.component); 

И дважды проверьте, если ваши импортирования правильно

import { NavController} from 'ionic-angular'; 

Answer 2

Вы не можете вводить NavController в вашем корневого компонента так что вы должны удалить его из этого часть кода. Дополнительную информацию можно найти: here.

Пожалуйста, убедитесь, что у вас уже есть ссылочная переменные в вашем ion-nav, как это (#myNav):.

<ion-nav #myNav [root]="rootPage"></ion-nav> 

И тогда вы можете получить эту ссылку с помощью ViewChild Вы можете просто перейти на другую страницу, с помощью этого свойства:

import { Nav, Platform, ... } from "ionic-angular"; 
// more imports... 
// ... 

@Component({ 
    templateUrl: "build/app.html" 
}) 

class MyApp { 
    @ViewChild('myNav') nav: NavController // <--- Reference to the Nav 

    authInfo: any; 
    rootPage: any = HomePage; 
    pages: Array<{title: string, component: any}>; 

    // Remove the "navCtrl: NavController" from the constructor, since 
    // now your getting the reference from the view 
    constructor(private platform: Platform, private af: AngularFire) { 
    this.initializeApp(); 

    this.pages = [ 
     { title: "Home", component: HomePage } 
    ]; 

    } 

    // ... 

    openPage(page) { 
    // this.navCtrl.setRoot(page.component); <-- Wrong! 
    this.nav.setRoot(page.component) // <-- Right! Use the this.nav property 
    } 

    // ... 
} 

Answer 3

Хорошо, я просто использовал СЧ вместо NavigationController и теперь он работает

Answer 4

.

Одна из причин этой ошибки заключается в том, что вы пытаетесь ввести NavController в класс поставщика.
Как это:

@Injectable() 
export class MyProviderService { 

    constructor(private nav: NavController){ 
    } 
} 

Я просто имел эту ошибку ...
После удаления этой инъекции (и рефакторинга кода), он работал отлично.

Answer 5

Вы не можете вводить NavController в корневой компонент через конструктор.

Таким образом, в принципе вы можете not сделать что-то, как показано ниже: -

constructor(private nav: NavController){ 
} 

И это то, что Ионные документы должен сказать.

Что делать, если вы хотите контролировать навигацию из своего корневого компонента приложения? Вы не можете вводить NavController, потому что любые компоненты, которые являются навигационными контроллерами, являются дочерними элементами корневого компонента, поэтому они недоступны для ввода.

Добавляя ссылочную переменную в ионно-нав, вы можете использовать @ViewChild, чтобы получить экземпляр компонента Nav, которая является навигационный контроллер (он расширяет NavController)

Answer 6

Рекомендуется использовать this.app.getActiveNavs() в ионическом 3+, как getActiveNav() будет удален в следующей версии, так что ваша функция может быть записана в виде:

showLoginModal() { 
    let loginPage = Modal.create(AuthPage); 
    this.getActiveNavs().slice(-1)[0].present(loginPage); 
} 

Чтобы нажать на стек нав, вы можете просто импортировать страницу (скажем YourPage), то :

this.getActiveNavs()[0].push(YourPage); 

Старое поведение, для ионических 2, устаревших в ионическом 3:

Вы можете использовать this.getActiveNav() в Ионических 2 (и ионических 3), так что ваша функция может быть записана в виде:

showLoginModal() { 
    let loginPage = Modal.create(AuthPage); 
    this.getActiveNav().present(loginPage); 
} 

С помощью любого метода вам не нужна переменная import или private, чтобы это работало. Если вы находитесь в Component, просто обратитесь к App:

import {App} from 'ionic-angular'; 
import {MyPage} from '../pages/my/page'; 

@Component() 
export class MyComponent { 
    constructor(private app: App) { 
    } 
    goToMyPage() { 
     this.app.getActiveNav().push(MyPage); 
    } 
}