我不做离子,这不是我的问题,这是我朋友的问题,她害怕在StackOverflow上问,因为她真的不知道如何问。
她只是想知道如何创建一个新的离子2侧菜单启动项目。
的HTML
<ion-menu [content]="content" side="left" id="menu1">
<ion-content class="outer-content" no-border-top>
<ion-list lines (click)="openSubCat($event,category)">
<ion-list-header>
Shop For
</ion-list-header>
<ion-item *ngFor="let item of categoryArray" let idx=index (click)="openSubCat(item.value)">
<ion-icon [name]="item.icon" item-left></ion-icon>
{{ item.value }}
<ion-icon [name]="item.icon2" item-right ></ion-icon>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>`
字符串app-components.ts
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { TutorialPage } from '../pages/tutorial/tutorial';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = TutorialPage;
pages: Array<{title: string, component: any}>;
categoryArray: Array<any> = [{
value:'Men',
icon: 'man',
icon2:'ios-arrow-forward-outline',
view:'viewToGoTo'
},{
value:'Woman',
icon: 'woman',
icon2:'ios-arrow-forward-outline',
view:'viewToGoTo'
},{
value:'Kids',
icon: '',
icon2:'ios-arrow-forward-outline',
view:'viewToGoTo'
}
];
constructor(public platform: Platform) {
this.initializeApp();
}
initializeApp() {
this.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) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
openSubCat(category){
console.log(category)
}
}
型
我给她发了this link,但不能解释太多,因为我不做离子,但它似乎是,创建一个数组,你只需要创建一个2d数组,是正确的吗?你能编辑这个问题中的代码,包括一个数组作为她学习的例子吗?
1条答案
按热度按时间0kjbasz61#
关于仓库(顺便说一句,感谢分享我的演示lol),这只是在Ionic中创建侧菜单的一种方法。就像你在
README.md
文件中看到的那样,首先将side-menu-content
文件夹(.ts,.html和.scss文件)的内容复制到你的项目中。然后将其添加到
app.module.ts
文件中的NgModule
的declarations
数组中:字符串
现在我们只需要添加一些代码来初始化侧菜单,以及当一个选项被选中时要做什么。所以在
app.component.ts
文件中,添加以下代码:型
现在最后一件要做的事情是在视图中添加侧菜单。因此将其放入
app.html
文件中:型