类 MyApp 中的错误 - 由以下原因导致：无法读取未定义的属性'setRoot'

Question

i刚刚使用ionic g page activities创建了ActivitiesPage。以下是CLI生成的默认页面

ActivitiesPage（Activity.ts）

// imports..
@Component({
  selector: 'page-activities',
  templateUrl: 'activities.html'
})
export class ActivitiesPage {
  constructor(public navCtrl: NavController, public navParams: NavParams){}
}

我已经设置了一个侧面菜单，从那里用户可以从页面列表中选择Activities。

Class MyApp（app.component.ts）

import { ActivitiesPage } from '../pages/activities/activities';
// other imports
@Component({
  templateUrl: 'app.html',
})
export class MyApp
{
  @ViewChild(NavController) navCtrl: NavController;
  rootPage = LoginPage; // TabsPage for bottom nav tabs
  activitiesPage: any = ActivitiesPage;
  constructor(public platform: Platform) {
    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();
      Splashscreen.hide();
    });
  }
  openPage(page: any)
  {
    this.navCtrl.setRoot(page);
  }
}

App Template（app.html）

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>RnB MENU</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button ion-item (click)="openPage(HomePage)">
        <ion-icon name="home"></ion-icon>&nbsp;&nbsp;
         Home
      </button>
      <button ion-item (click)="openPage(MessagesPage)">
        <ion-icon name="chatboxes"></ion-icon>&nbsp;&nbsp;
        Messages
      </button>
      <button ion-item (click)="openPage(ActivitiesPage)">
        <ion-icon name="analytics"></ion-icon>&nbsp;&nbsp;
        Activities
      </button>
     </ion-list>
  </ion-content>
</ion-menu>
<ion-nav id="nav" #content [root]="rootPage"></ion-nav>

当我尝试通过菜单打开ActivitiesPage时，我会遇到以下错误。

in ./myapp类myApp-引起的错误 - 无法读取未定义的

的属性'setRoot'

Answer 1

此错误似乎是从类 myApp 中的navCtrl类成员开始的事实中出现的。

尝试更改类 myApp 中的navCtrl的定义：

@ViewChild('content') navCtrl: NavController;