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

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

Исходный файл 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 of undefined

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

Какие-либо предложения? Спасибо!


ionic-framework navigation angular nav ionic2
person Han Che    schedule 28.08.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вам следует попробовать передать navCtrl родительского компонента в функцию openPage, From ionic docs:

Внедрение NavController всегда дает вам экземпляр ближайшего NavController, независимо от того, является ли он вкладкой или Nav.

За кулисами, когда Ionic создает экземпляр нового NavController, он создает инжектор с NavController, привязанным к этому экземпляру (обычно либо Nav, либо Tab), и добавляет инжектор к своим собственным поставщикам. Дополнительные сведения о поставщиках и внедрении зависимостей см. В разделе «Поставщики» и «DI».

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

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

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

У вас нет navCtrl для инъекции, но у вас есть в menu.ts:

@ViewChild(Nav) nav: Nav;

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

person Billel Guerfa    schedule 28.08.2016