如何导航到 ionic 3 中的侧边菜单选项 [关闭]答案

【问题标题】：How to navigate to the sidemenu options in ionic 3 [closed]如何导航到 ionic 3 中的侧边菜单选项 [关闭]
【发布时间】：2018-10-04 06:10:51
【问题描述】：

我是离子新手。我正在尝试通过单击该选项来访问侧面菜单选项。但我无法导航到该页面，我得到了

“无法读取未定义的属性‘组件’”

这个错误。我如何通过单击 sode 菜单选项来访问这些页面。如果我使用推送，那么所有选项都将转到单个页面而不是那个特定页面。

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Nav} from 'ionic-angular';
import { DashboardPage } from '../dashboard/dashboard';
import { ProfilePage } from '../profile/profile';
import { sidemenuDeclaration } from '../../sideMenuDeclare';
import { MenuController } from 'ionic-angular';
import { FeaturesPage } from '../features/features';
import { MediaPage } from '../media/media';
import { BlogPage } from '../blog/blog';

@IonicPage()
@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html',
})
export class MenuPage {
@ViewChild(Nav) nav:Nav;

  rootPage:any = DashboardPage;

  constructor(public navCtrl: NavController, public navParams: NavParams, public menuCtrl: MenuController) {
  }

options : sidemenuDeclaration[] = [
  {title : "Home" , icon : "home" ,component : DashboardPage},
  {title : "Features" ,icon : "settings" , component : FeaturesPage},
  {title : "Media" , icon : "images" , component : MediaPage},
  {title : "Blog" ,icon : "create" ,component : BlogPage},
  {title : "Contact" , icon : "contact" ,component : ProfilePage},
  {title : "Like Us" , icon : "logo-facebook" ,component : ProfilePage},
  {title : "Follow Us" , icon : "logo-twitter" ,component : ProfilePage}
]

  ionViewDidLoad() {
    console.log('ionViewDidLoad MenuPage');
  }
  goToProfile(){
    this.navCtrl.push(ProfilePage);
  }

  menuOptions(op){
    this.nav.setRoot(op.component);
  }

}

<ion-menu [content]='content'>
    <ion-header>

        <ion-toolbar color = "danger">
            <ion-title (click) = "goToProfile()">
                <ion-icon name="contact"></ion-icon>Profile
            </ion-title>
        </ion-toolbar>
    </ion-header>


    <ion-content padding>
        <button ion-item *ngFor = "let op of options" (click) = "menuOptions()">
            <ion-icon name = {{op.icon}}></ion-icon>
            {{op.title}}
        </button>
    </ion-content>

</ion-menu>

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

【问题讨论】：

您应该在 (click) = "menuOptions()" 中传递 op 以在您的组件中访问它。
调用函数时没有传递参数。当然它是未定义的，还能是什么？
您没有在点击选项 HTML 中传递 op。将 (click)="menuOptions()" 替换为 html 中的 menuOptions(op)。
谢谢你们问题解决了.....

标签： angular typescript ionic3

【解决方案1】：

函数menuOptions 需要一个未在 (html) 模板中传递的参数。使用下面的 sn-p。

   <ion-content padding>
        <button ion-item *ngFor = "let op of options" (click) = "menuOptions(op)">
            <ion-icon name = {{op.icon}}></ion-icon>
            {{op.title}}
        </button>
    </ion-content>

【讨论】：