ionic 2 sidemenu - navCtrl внутри компонента

Question

Я использую ионный шаблон 2 стартера с sidemenu.

Так оригинальный app.html выглядит следующим образом

<ion-menu [content]="content"> 
    <ion-toolbar> 
     <ion-title>Menu</ion-title> 
    </ion-toolbar> 

    <ion-content> 
     <ion-list> 
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
       {{p.title}} 
      </button> 
     </ion-list> 
    </ion-content> 
</ion-menu> 

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 

, и я хочу, чтобы заменить содержимое меню с компонентом, как это

<ion-menu [content]="content"> 
    <st-menu></st-menu> 
</ion-menu> 

моего menu.component.ts выглядит так, которая в основном скопированы с оригинала app.ts файл

import {Page1} from "../pages/page1/page1"; 
import {Page2} from "../pages/page2/page2"; 
import {Nav, NavController} from "ionic-angular"; 

@Component({ 
    selector: 'st-menu', 
    templateUrl: 'build/menu/menu.html' 
}) 

export class MenuCmp { 
    @ViewChild(Nav) nav: Nav; 

    pages: Array<{title: string, component: any}>; 

    constructor(private navCtrl:NavController) { 
     this.pages = [ 
      { title: 'Home', component: HomePage }, 
      { title: 'Page uno', component: Page1 }, 
      { title: 'Page dos', component: Page2 } 
     ]; 
    } 
    openPage(page) { 
     this.nav.setRoot(page.component); 
    } 

} 

и menu.html как это

<ion-toolbar> 
    <ion-title>Menu</ion-title> 
</ion-toolbar> 

<ion-list> 
    <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
     {{p.title}} 
    </button> 
</ion-list> 

Теперь, когда я нажимаю в меню я получаю сообщение об ошибке:

Не удается прочитать свойство «setRoot» неопределенной

Я проверил, заменив this.nav. setRoot (page.component) с this.nav.setRoot (HomePage); и он все тот же. Когда я заменяю нав с navCtrl (при условии, и впрыскивается) он говорит this.navCtrl.setRoot не является функцией

Любые предложения? Благодаря!

Answer 1

Вы должны попробовать прохождение navCtrl родительского компонента функции openPage, Из ионных Docs:

Injecting NavController will always get you an instance of the nearest NavController, regardless of whether it is a Tab or a Nav.

Behind the scenes, when Ionic instantiates a new NavController, it creates an injector with NavController bound to that instance (usually either a Nav or Tab) and adds the injector to its own providers. For more information on providers and dependency injection, see Providers and DI.

они также говорят:

What if you want to control navigation from your root app component? You can't inject NavController because any components that are navigation controllers are children of the root component so they aren't available to be injected.

By adding a reference variable to the ion-nav, you can use @ViewChild to get an instance of the Nav component, which is a navigation controller (it extends NavController):

Вы не имеете navCtrl к но у вас есть в menu.ts:

@ViewChild(Nav) nav: Nav; 

Но у вас нет ионного навигатора как vi ewChild в menu.html Вы можете либо передать navCtrl из app.ts в компонент как вход, либо найти способ обернуть ионный навигатор в menu.html, вы также можете просто объявить функцию OpenPage в приложении .ts, затем передать его компоненту в качестве входа (но используйте обозначение стрелки, когда вы объявляете функцию, чтобы сохранить эту область)