Question

我使用带有侧面菜单的离子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>

现在，当我在菜单中点击时，我收到了错误：

无法读取属性＆＃39; setRoot＆＃39;未定义的

我已经通过更换测试了 This.nav.setRoot（page.component）with this.nav.setRoot（HomePage）; 它仍然是一样的。当我用navCtrl（提供和注入）替换导航时，它说 this.navCtrl.setRoot不是函数

有什么建议吗？谢谢！

Answer 1

您应该尝试将父组件的navCtrl传递给openPage函数，来自离子文档：

注入NavController将始终为您提供最近的NavController的实例，无论它是Tab还是Nav。

在幕后，当Ionic实例化一个新的NavController时，它会创建一个NavController绑定到该实例的注入器（通常是Nav或Tab），并将注入器添加到它自己的提供者。有关提供者和依赖注入的更多信息，请参阅提供者和DI。

他们也说：

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

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

你没有要注入的navCtrl，但你有menu.ts：

@ViewChild(Nav) nav: Nav;

但是你没有在menu.html上使用ion-nav作为viewChild 你可以将nav.trl从app.ts传递给组件作为输入，或者找到一种方法来包装menu.html中的离子导航，你也可以在app.ts级别声明openPage函数，然后通过它作为输入组件（但在声明函数以保持此范围时使用箭头符号）

离子2 sidemenu - 组件内的navCtrl

1 个答案: