Je travaille dans l'application Ionic et je souhaite afficher le sous-menu dans la barre latérale. Je récupère les menus à l'aide de *ngFor
mais le problème est que je ne parviens pas à afficher le sous-menu.
Ceci est mon app.html :
<ion-menu [content]="content" side="left" type="overlay">
<ion-content class="mymenu22">
<ion-grid class="formenu11">
<h1 class="mymenuh11">OTHERS</h1>
</ion-grid>
<ion-list>
<button menuClose ion-item *ngFor="let p1 of pages1" (click)="openPage(p1)" class="menu2">
<ion-icon name="{{p1.name1}}"></ion-icon> {{p1.title1}}
</button>
</ion-list>
</ion-content>
</ion-menu>
En cela, j'affiche les menus dans la barre latérale et je veux afficher le sous-menu du premier menu.
Ceci est mon app.component.ts :
pages1: Array<{title1: string, component: any, name1: string}>;
this.pages1 = [
{ title1: 'Manage Account', component: ManageaccountPage, name1: 'settings' },
{ title1: 'About Us', component: AboutPage, name1: 'people' },
{ title1: 'Gallery', component: GalleryPage, name1: 'images' },
{ title1: 'Contact Us', component: ContactPage, name1: 'contacts' },
];
Pour le compte Gérer, je veux afficher le sous-menu.
Pour le compte Gérer, je veux afficher le sous-menu mais je ne reçois aucun code pour cela.
Toute aide est très appréciée.
Vous pouvez conserver les pages de sous-menu dans un autre tableau à l'intérieur de l'objet de page pour les afficher à l'aide de *ngFor
.
Définissez votre page object
avec les attributs nécessaires.
pages1: Array<{title1: string, component: any, name1: string, showDetails: boolean, icon: string, subPages: any[]}>;
Ajoutez des pages au tableau pages1 comme ci-dessous à l'intérieur de Page constructor
. N'oubliez pas de définir rootPage
votre application.
this.pages1 = [
{ title1: 'Manage Account', component: ManageaccountPage, name1: 'settings', showDetails: false, icon: 'ios-arrow-down', subPages: null },
{ title1: 'About Us', component: AboutPage, name1: 'people', showDetails: false, icon: 'ios-arrow-down', subPages: null },
{ title1: 'Galler', component: GalleryPage, name1: 'images', showDetails: false, icon: 'ios-arrow-down', subPages: null },
{ title1: 'Contact Us', component: '', name1: 'contacts', showDetails: false, icon: 'ios-arrow-down',
subPages: [
{ title1: 'Contact1', component: Contact1Page, name1: 'contact1' },
{ title1: 'Contact2', component: Contact2Page, name1: 'contact2' },
{ title1: 'Contact3', component: Contact3Page, name1: 'contact3' },
]
},
];
Définissez une fonction pour ouvrir la page cliquée à partir du menu latéral.
openPage(p1) {
this.rootPage = p1.component;
}
Définissez une fonction pour réduire / développer les éléments de votre sous-menu dans le menu latéral.
toggleDetails(p) {
if (p.showDetails) {
p.showDetails = false;
p.icon = 'ios-arrow-down';
} else {
p.showDetails = true;
p.icon = 'ios-arrow-up';
}
}
Votre html de menu latéral devrait être comme ci-dessous.
<ion-menu [content]="content" side="left" type="overlay">
<ion-content>
<ion-grid>
<h1>OTHERS</h1>
</ion-grid>
<ion-list>
<ion-item ion-item *ngFor="let p1 of pages1" (click)="toggleDetails(p1)" [ngStyle]="{'background': (p1.subPages != null) ? '#dcd5d5': null}">
<ion-icon name="{{p1.name1}}"></ion-icon>
<span *ngIf="p1.component === ''">{{p1.title1}}</span>
<span *ngIf="p1.component !== ''" menuClose (click)="openPage(p1)">{{p1.title1}}</span>
<ion-icon float-right *ngIf="p1.subPages != null" [name]="p1.icon" item-end></ion-icon>
<div *ngIf="p1.showDetails &&p1.subPages != null">
<ion-list>
<ion-item style="border-bottom: 1px solid #1f1c1c;background: #dcd5d5" ion-item *ngFor="let subP of p1.subPages">
<span (click)="openPage(subP)" menuClose>{{subP.title1}}</span>
</ion-item>
</ion-list>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
Je crois que ceci vous aidera. Trouvez la démo de StackBlitz ici .
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots