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添加到了路径，但是现在当我登录该应用程序时，它无法将我重定向到任何地方。网址更改为http://localhost:8100/menu，但该页面未加载，并且控制台中未显示任何错误。

有人可以向我解释实施辅助菜单的错误吗？

Answer 1

上述方法是将制表符和其他子代实现到地图等组件。

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

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

从'@ angular / core'导入{组件};
从'@ ionic / angular'导入{Platform}；从'@ ionic-native / splash-screen / ngx'导入{SplashScreen}；从'@ ionic-native / status-bar / ngx'导入{StatusBar};

@Component（{ 选择器：“ app-root”， templateUrl：“ app.component.html”， styleUrls：['app.component.scss'] }）导出类AppComponent { 导航：任何; 构造函数私人平台：平台，私人的SplashScreen：SplashScreen，私人statusBar：StatusBar ）{ this.sideMenu（）; this.initializeApp（）; } sideMenu（） { this.navigate = [ { 标题：“首页”，网址：“ ./ home / home.module”，图标：“首页” }， { 标题：“聊天”，网址：“ ./ chat / chat.module”，图标：“聊天框” }， { 标题：“联系人”，网址：“ ./ contacts / contacts.module”，图标：“联系人” }， ] }

initializeApp（）{ this.platform.ready（）。then（（）=> { this.statusBar.styleDefault（）; this.splashScreen.hide（）; }）; } }

app.component.html-将离子菜单添加到您的应用

<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时，该页面的菜单将被禁用

无法重定向到Menu Ionic 5

1 个答案: