Comment afficher le sous-menu dans la barre latérale pour le menu affiché en boucle dans Ionic

Raghav kumar

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 *ngFormais 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.

entrez la description de l'image ici

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.

Sudarshana Dayananda

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 objectavec 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 rootPagevotre 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.

modifier le
0

laisse moi dire quelques mots

0commentaires
connexionAprès avoir participé à la revue

Articles connexes

Comment définir « masquer » et afficher dans le menu de la barre latérale

Comment afficher la sous-liste en cliquant sur le menu de la barre latérale verticale en utilisant css et html?

Comment afficher le sous-menu horizontal dans la barre de navigation Bootrap ?

Menu de la barre latérale pour macOS dans SwiftUI

jQuery bascule le sous-menu de la barre latérale en fonction de l'actif

Comment désactiver l'interaction dans le menu de la barre latérale à l'aide de SWRevealViewController

Comment afficher et masquer la page dans le menu latéral IONIC2

Éléments du menu déroulant de la barre latérale dans le sac à dos Laravel

Ouvrez le menu déroulant surCliquez dans la barre latérale

le menu de la barre latérale ne s'effondre pas automatiquement dans les mobiles

le menu des informations d'identification jenkins n'apparaît pas dans la barre latérale

Comment afficher mon composant à côté de la barre latérale en cliquant sur le menu de sidenav en angulaire 8 et en matériau angulaire

Dans une barre latérale, comment puis-je ouvrir le menu secondaire à côté du menu de premier niveau?

Comment gérer le bouton et le popup modal lorsque le bouton est défini dans la barre latérale et afficher la barre latérale extérieure en utilisant la position?

lorsque vous cliquez sur l'élément de la barre latérale, vous voulez passer des accessoires pour cocher cacher ou afficher un bouton dans le composant que le menu de la barre latérale dans l'interface utilisateur principale réagit

Comment afficher le fichier actuel dans l'explorateur de la barre latérale avec le focus dans Visual Studio Code

Comment implémenter le routage dynamique dans routes.js pour les éléments de menu générés dans la barre latérale dans Universal React Redux passe-partout par erikras

Les filtres dans le menu de la barre latérale ne s'affichent pas dans R brillant

Html, CSS: le sous-menu de la barre latérale n'apparaît pas

Afficher les éléments du menu de la barre latérale en fonction du rôle de l'utilisateur, avec le package "yaminncco/vue-sidebar-menu"

Comment mettre à jour le contenu en fonction de la barre latérale dans AngularJS

Wordpress : Comment afficher le menu du sous-menu dans le menu parent

Comment puis-je ajouter une image d'arrière-plan dans le menu de la barre latérale avec Flutter?

afficher le menu de la barre latérale ouvert par défaut dans le chargement de la page et se fermer lorsque vous cliquez sur le bouton bascule dans angulaire 4

Réduire le menu de la barre latérale Flex

React.js: react-router-dom ne fonctionne pas dans le menu de la barre latérale

Comment faire en cliquant sur un bouton de menu pour afficher / masquer un composant de la barre latérale de menu

Comment afficher un tableau dans une barre latérale HTML dans le script Google Apps

Menu de la barre latérale dans Xamarin. iOS

TOP liste

  1. 1

    Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?

  2. 2

    Enregistrer le chemin de l'image de la galerie vers la base de données de la salle et l'afficher dans la liste des recycleurs

  3. 3

    Microsoft.WebApplication.targets

  4. 4

    knn classification 10 plis de l'outil et du tri

  5. 5

    Quelle est la relation entre le modèle et le tableau ? C'est compliqué

  6. 6

    Créer un système Buzzer à l'aide de python

  7. 7

    Fonction de puissance en Java

  8. 8

    opérations en virgule flottante dans go

  9. 9

    Comment définir la couleur de l'intersection dans un diagramme de Venn?

  10. 10

    Spring @RequestParam DateTime format comme ISO 8601 Date Heure facultative

  11. 11

    comment supprimer "compte de connexion google" à des fins de développement - actions sur google

  12. 12

    AutoMapper.Collection.EFCore - Erreur générée lors de la configuration

  13. 13

    Je continue à obtenir l'objet 'WSGIRequest' n'a pas d'attribut 'Get' sur django

  14. 14

    Comment remplir les valeurs manquantes avec plusieurs colonnes dans R

  15. 15

    Comment puis-je ajouter un UIView sous mon contrôleur de barre d'onglets par programme?

  16. 16

    Yat-il un référentiel maven application Java à démarrer rapidement 11

  17. 17

    Comment rechercher des éléments dans une ArrayList? - Java

  18. 18

    Comment utiliser HttpClient avec TOUT cert ssl, quelle que soit la « mauvaise » est

  19. 19

    Comment créer un bot à compte à rebours dans Discord en utilisant Python

  20. 20

    Sélectionnez le bouton radio sur la saisie de texte

  21. 21

    Placez le modeBar en haut au centre à l'aide de plotly.js

chaudétiquette

Archive