我有一个带有手风琴菜单的ionic 3项目。现在有必要更新到离子4。我已将所有代码都转换为Ionic 4，但是由于路由方法发生了许多更改，因此无法将菜单从Ionic 3转换为Ionic 4。下面给出了Ionic 3 Accordion侧菜单代码的主要部分，如何在Ionic 4中使用它...
// Side Menu Component
import { SideMenuContentComponent } from './../shared/side-menu-content/side-menu-content.component';
import { SideMenuSettings } from './../shared/side-menu-content/models/side-menu-settings';
import { MenuOptionModel } from './../shared/side-menu-content/models/menu-option-model';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) navCtrl: Nav;
// Get the instance to call the public methods
@ViewChild(SideMenuContentComponent) sideMenu: SideMenuContentComponent;
public rootPage: any = WelcomePage;
// Options to show in the SideMenuComponent
public options: Array<MenuOptionModel>;
// Settings for the SideMenuComponent
public sideMenuSettings: SideMenuSettings = {
accordionMode: true,
showSelectedOption: true,
selectedOptionClass: 'active-side-menu-option',
subOptionIndentation: {
md: '16px',
ios: '64px',
wp: '56px'
}
};
private unreadCountObservable: any = new ReplaySubject<number>(0);
constructor(private platform: Platform,
private statusBar: StatusBar,
private splashScreen: SplashScreen,
private alertCtrl: AlertController,
private menuCtrl: MenuController) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleLightContent();
this.splashScreen.hide();
// Initialize some options
this.initializeOptions();
});
// Change the value for the batch every 5 seconds
setInterval(() => {
this.unreadCountObservable.next(Math.floor(Math.random() * 10));
}, 5000);
}
private initializeOptions(): void {
this.options = new Array<MenuOptionModel>();
// Load simple menu options
// ------------------------------------------
this.options.push({
iconName: 'home',
displayName: 'முகப்பு - Home',
component: HomePage,
subItems: [
{
iconName: 'home',
displayName: 'முகப்பு-Home',
component: HomePage,
},
{
iconName: 'heart',
displayName: 'அறிமுகம்- Welcome',
component: WelcomePage,
},
{
iconName: 'information-circle',
displayName: 'எம்மைப் பற்றி- SVK',
component: AboutPage
}
]
});
此手风琴没有css效果，并且仅用于一个级别。
步骤1：让我们假设您在ioni4应用程序中总共创建了9页。
步骤2：将菜单另存为Asset / data / menus.json下的json使用有意义的名称和在app.routing.module.ts中找到的URL更改URL
[
{
"name": "Menu1 ",
"item": [
{
"icon": "calendar",
"name": "Item1",
"url": "/item1"
},
{
"icon": "calendar",
"name": "Item2",
"url": "/item2"
},
{
"icon": "calendar",
"name": "Item3",
"url": "/item3"
}
]
},
{
"name": "Menu2",
"item": [
"item": [
{
"icon": "calendar",
"name": "M2Item1",
"url": "/m2item1"
},
{
"icon": "calendar",
"name": "M2Item2",
"url": "/m2item2"
},
{
"icon": "calendar",
"name": "M2Item3",
"url": "/m2item3"
}
]
},
{
"name": "Menu3",
"item": [
"item": [
{
"icon": "calendar",
"name": "M3Item1",
"url": "/m2item1"
},
{
"icon": "calendar",
"name": "M3Item2",
"url": "/m2item2"
},
{
"icon": "calendar",
"name": "M3Item3",
"url": "/m2item3"
}
]
}
]
Step3：如下更改app.component.html的内容：
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" class="mymenu">
<ion-item [routerDirection]="'root'" [routerLink]="['/home']" (click)="clearLevel()">
<ion-label><ion-icon name="home"></ion-icon> Home, About, Contact</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-item *ngFor="let p of appPages; let i=index;" [routerDirection]="'root'" (click)="toggleLevel1('idx'+i)" [ngClass]="{active: isLevel1Shown('idx'+i)}">
<ion-label>
<ion-icon [name]="isLevel1Shown('idx'+i) ? 'md-arrow-dropdown' : 'md-arrow-dropright'" slot="end" style="font-size: 20px;"></ion-icon>
{{p.name}}
<ul *ngIf="isLevel1Shown('idx'+i)" class="level2">
<li *ngFor="let i1 of p.item; let l=index;" [routerLink]="[i1.url]">
<ion-menu-toggle auto-hide="false" class="first-level"><ion-icon name="{{i1.icon}}"></ion-icon> {{i1.name}}</ion-menu-toggle>
</li>
</ul>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>
</ion-app>
step4：将以下scss添加到app.component.scss文件：
.level1 {
padding: 0;
margin: 2px 0;
li {
border-top: solid 1px rgb(46, 9, 177);
// padding: 0px 0 0 8px;
}
}
.level2 {
padding-left: 5px;
--background: rgb(218, 248, 241) !important;
color:blue;
line-height: 2.5;
li {
border-top: solid 1px orange;
background-color: rgb(230, 248, 226);
padding: 2px 0 0 8px;
font-size: 14px;
}
}
ion-split-pane{
ion-content{
--background: rgb(218, 248, 241) !important;
}
ion-item{
--background: rgb(218, 248, 241) !important;
--color: rgb(71, 3, 148);
}
}
step5：在类主体的任意位置添加app.component.ts中的几行代码：
clearLevel() {
this.showLevel1 = null;
this.showLevel2 = null;
// this.showLevel3 = null;
}
toggleLevel1(idx: string) {
if (this.isLevel1Shown(idx)) {
this.showLevel1 = null;
} else {
this.showLevel1 = idx;
}
}
isLevel1Shown(idx: string) {
return this.showLevel1 === idx;
}
如果我错过了这里要提的内容，请告诉我结果。