无法重定向到菜单离子5

Posted 2023-02-07

[我正在使用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，但页面未加载，并且控制台中未显示任何错误。

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

答案

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

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

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

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

   @@@@@ 选择器：“ 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时，该页面的菜单将被禁用