时间戳

首页 > 解决方案 > IONIC 5 - 侧边菜单项链接到特定页面

angular - IONIC 5 - 侧边菜单项链接到特定页面

问题描述

我一直在努力使用 Ionic 5 侧边菜单……我使用侧边菜单模板创建了一个新应用程序。我可以通过选择“运行‘应用程序’”在浏览器和 android studio 上运行该应用程序。到目前为止，一切都很好！

我已将一些页面添加到名为“页面”的文件夹中。在 app.component.ts 我添加了很多条目我添加了页面但是......

  1. 如果我不更改 URL 格式并保留“/folder/#name of page#”，我始终是任何给定页面的 UI 组件通用页面。显示菜单图标。
  2. 如果我将 URL 更改为 /pages/#name of page#，我将获得该给定页面的自定义内容（存在于相应的 html 文件中），但未显示菜单图标。

我可以让菜单项指向相应的自定义页面，并且仍然可以在左上角获得菜单图标。我已经将此问题追溯到 app.component.ts 但不确定出了什么问题。

谁能帮我？

（我正在使用角度）

标签： angularionic5

解决方案

您可以使用角度路由或离子导航，并从侧面菜单项中指定单击事件的页面 URL。

public appPages = [
    { title: 'Inbox', url: '/folder/Inbox', icon: 'mail' },
    { title: 'Outbox', url: '/folder/Outbox', icon: 'paper-plane' },
    { title: 'Favorites', url: '/folder/Favorites', icon: 'heart' },
    { title: 'Archived', url: '/folder/Archived', icon: 'archive' },
    { title: 'Trash', url: '/folder/Trash', icon: 'trash' },
    { title: 'Spam', url: '/folder/Spam', icon: 'warning' },
  ];

然后在侧边菜单的 html 上：

<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
            <ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
              <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
              <ion-label>{{ p.title }}</ion-label>
            </ion-item>
</ion-menu-toggle>

此处 [routerLink] 有助于绑定到数组中指定的值或 URL，单击时会导航到该 URL。

推荐阅读