单击侧面菜单时页面未打开 - ionic 2 应用程序答案

【问题标题】：Page doesn't open on clicking in side menu - ionic 2 app单击侧面菜单时页面未打开 - ionic 2 应用程序
【发布时间】：2017-11-09 13:12:48
【问题描述】：

在侧边菜单中单击页面时无法打开页面。

这是我的 app.component.ts：

this.pages = [
                { title: 'NFC Page', component: NfcPage, note: 'NFC Page' },
                { title: 'Student Details', component: StudentDetails, note: 'Student Details' },
    ];

这是我的 app.module.ts：

@NgModule({
  declarations: [
    StudentDetails,
    NfcPage,
],
entryComponents: [
    StudentDetails,
    NfcPage,
  ],

这是我的 nfc.ts 页面：

 import {Component} from '@angular/core';
    import {IonicPage, NavController, NavParams} from 'ionic-angular';
    import {NFC, Ndef} from '@ionic-native/nfc';

    @IonicPage()
    @Component({
        selector: 'page-nfc',
        templateUrl: 'nfc.html',
    })
    export class NfcPage {

        constructor(public navCtrl: NavController,
                    public navParams: NavParams,
                    private nfc: NFC,
                    private ndef: Ndef) {
}
}

这是我的 nfc.html 页面：

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>NFCPage</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <p>NFC Page!</p>
</ion-content>

学生详细信息页面可以正常打开，但是当我点击“NFC 页面”时，什么也没有发生。

【问题讨论】：

标签： angularjs typescript ionic-framework ionic2

【解决方案1】：

要通过侧边菜单打开页面，您需要在单击侧边菜单选项时将该页面设置为根页面。您可以找到以下代码：-

app.html：

<ion-menu id="myMenu" [content]="mycontent" >
    <ion-content>
        <ion-list>
            <ion-item  ion-item small menuClose  (click)="nav.setRoot(pages.nfc)">
                <ion-icon name="home" item-left menuClose ></ion-icon> NFC 
            </ion-item > 
                <ion-item small menuClose  (click)="nav.setRoot(pages.std_detils)">
                <ion-icon ios="ios-contact" md="ios-contact" item-left ></ion-icon> Student Details
            </ion-item> 
        </ion-list>
    </ion-content>
</ion-menu>

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

app.component.ts：

this.rootPage = NfcPage;
  this.pages = {
        "nfc": NfcPage,
        "std_detils": StudentDetails,

      };

【讨论】：

【解决方案2】：

我设法找到了解决方案。问题出在nfc.ts 模块的constructor 中。两个私有参数（private nfc: NFC 和 private ndef: Ndef）似乎从我正在使用的插件中损坏。我从constructor 中删除了这两个参数，并且能够打开该页面。可悲的是，控制台或其他任何地方都没有抛出异常。希望它可以帮助某人。

【讨论】：