时间戳

首页 > 解决方案 > 无法重定向到菜单离子 5

angular - 无法重定向到菜单离子 5

问题描述

我正在使用 Ionic 5 开发一个应用程序，在用户通过身份验证后，我想将他重定向到页面“accueil”，该页面将包含一个侧面菜单。

我创建了我需要的页面，当我没有侧边菜单时，我的身份验证页面确实有效，并将“accueil”页面重定向到了我，但现在它不再有效了。

我的app.routing.module.ts包含：

const routes: Routes = [
  {
     path: '', redirectTo: 'home', pathMatch: 'full' 
  },
  {
     path: 'home', loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule)
    },
  { 
    path: 'auth/:mode', loadChildren: './pages/auth/auth.module#AuthPageModule' 
  },
  {
    path: 'menu',
    loadChildren: () => import('./pages/menu/menu.module').then( m => m.MenuPageModule)
  }
];

这是我的menu-routing.module.ts：

const routes: Routes = [
  {
    path: 'menu',
    component: MenuPage,
    children: [
      { 
        path: 'accueil',
        loadChildren: '../accueil/accueil.module#AccueilPageModule' 
      },
      {
        path: 'profil',
        loadChildren: '../profil/profil.module#ProfilPageModule'
      }
    ]
  },
  {
    path: '/auth/connect',
    redirectTo: '/menu/accueil'
  }
];

起初，redirectTo 的路径是：

{
  path: '',
  redirectTo: '/menu/accueil'
}

但我遇到了错误

"ERROR Error: "Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'menu/accueil'"

所以我添加/auth/connect了路径，但是现在当我登录应用程序时，它不会将我重定向到任何地方。网址更改为，http://localhost:8100/menu但页面未加载，并且控制台中未显示错误。

有人可以解释一下我在实施 sidemenu 时做错了什么吗？

标签： angulartypescriptionic-framework

解决方案

上面的方法是将标签和其他子元素实现到地图等组件中。

对于侧面菜单，您可以使用以下方法：

  1. app.component.ts - 创建一个对象数组，其中包含侧菜单的不同页面。

    从'@angular/core'导入{组件}；
    从'@ionic/angular'导入{平台}；从 '@ionic-native/splash-screen/ngx' 导入 { SplashScreen }；从'@ionic-native/status-bar/ngx'导入{状态栏}；

    @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'] }) 导出类 AppComponent { navigate:any; 构造函数（私有平台：Platform，私有splashScreen：SplashScreen，私有statusBar：StatusBar）{this.sideMenu(); this.initializeApp(); } sideMenu() { this.navigate=[ { title : "Home", url : "./home/home.module", icon : "home" }, { title : "Chat", url : "./chat/ chat.module", icon : "chatboxes" }, { title : "Contacts", url : "./contacts/contacts.module", icon : "contacts" }, ] }

    initializeApp() { this.platform.ready().then(() => { this.statusBar.styleDefault(); this.splashScreen.hide(); }); } }

app.component.html- 将 ion-menu 添加到您的应用程序

<ion-app>
    <ion-menu side="start" menuId="first" contentId="content1">
        <ion-header>
          <ion-toolbar>
            <ion-title>Navigate</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list *ngFor="let pages of navigate">
          <ion-menu-toggle auto-hide="true">
            <ion-item [routerLink]="pages.url" routerDirection="forward">
                <ion-icon [name]="pages.icon" slot="start"></ion-icon>
                   {{pages.title}} 
            </ion-item>
          </ion-menu-toggle>
          </ion-list>
        </ion-content>
      </ion-menu>
  <ion-router-outlet  id="content1"></ion-router-outlet>
</ion-app>

home.page.html - 将菜单按钮添加到您希望出现侧边菜单的每个页面。

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
        </ion-buttons>
      <ion-title>
        Home
      </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    The world is your oyster.
    <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
  </div>
</ion-content>

因此，您可以将根路径重定向到您的身份验证页面......然后在身份验证后只需导航到主页（包含您的侧菜单的页面）

要禁用给定页面上的菜单..

import { Component, OnInit } from '@angular/core';
import { MenuController } from '@ionic/angular';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.page.html',
  styleUrls: ['./chat.page.scss'],
})
export class ChatPage implements OnInit {

  constructor(public menuCtrl: MenuController) 
  {
    this.menuCtrl.enable(false,"first");
   }

  ngOnInit() {
  }

}

请注意，在我的 app.component.html 中，我声明了一个 menuId 而不仅仅是 id....

推荐阅读