无法重定向到菜单离子 5

Question

我正在使用 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，但是现在当我登录应用程序时，它不会将我重定向到任何地方。 url 更改为http://localhost:8100/menu，但页面没有加载，控制台也没有显示错误。

有人可以解释一下我在实现侧边菜单时做错了什么吗？

Answer 1

上述方法是将标签和其他子组件实现到地图等组件。

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

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

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

   @组件({ 选择器：'应用程序根'， templateUrl: 'app.component.html', styleUrls: ['app.component.scss'] }) 导出类 AppComponent { 导航：任何； 构造函数（ 私有平台：平台， 私人闪屏：闪屏， 私有状态栏：状态栏 ) { this.sideMenu(); this.initializeApp(); } 侧边菜单（） { this.navigate=[ { 标题：“家”， 网址：“./home/home.module”， 图标：“家” }, { 标题：“聊天”， 网址：“./chat/chat.module”， 图标：“聊天框” }, { 标题：“联系人”， url : "./contacts/contacts.module", 图标：“联系人” }, ] }

   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....如果您只使用 id，则不会有任何更改，但使用 menuId 时，该页面的菜单将被禁用