Angular Can'；t重定向到菜单5

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

我创建了我需要的页面，我的授权页面确实有效，当我没有侧菜单时，我将“accueil”页面重定向给我，但现在它不再有效

My

app.routing.module.ts

包含：

const routes:routes=[
{
路径：“”，重定向到“主”，路径匹配：“完整”
},
{
路径：“home”，loadChildren:（）=>import（“./pages/home/home.module”）。然后（m=>m.HomePageModule）
},
{ 
路径：“auth/：mode”，loadChildren:”./pages/auth/auth.module#AuthPageModule'
},
{
路径：“菜单”，
loadChildren:（）=>import（'./pages/menu/menu.module'）。然后（m=>m.MenuPageModule）
}
];

这是我的

菜单routing.module.ts

：

const routes:routes=[
{
路径：“菜单”，
组成部分：菜单页，
儿童：[
{ 
路径：“accueil”，
loadChildren:“../accueil/accueil.module#AccueilPageModule”
},
{
路径：“profile”，
loadChildren:“../profil/profil.module#ProfilPageModule”
}
]
},
{
路径：'/auth/connect'，
重定向到：'/menu/accueil'
}
];

首先，重定向到的路径是：

{
路径：“”，
重定向到：'/menu/accueil'
}

但是我犯了错误

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

因此，我在路径中添加了

/auth/connect

，但现在当我登录应用程序时，它不会将我重定向到任何地方。url更改为

http://localhost:8100/menu

但页面未加载，且控制台中未显示任何错误

---

有人能解释一下实现侧菜单的错误吗？

上面的方法是将选项卡和其他子项实现到组件（如地图）中

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

app.component.ts-创建包含侧菜单不同页面的对象数组

从'@angular/core'导入{Component}
从'@ionic/angular'导入{Platform}； 从'@ionic native/SplashScreen/ngx'导入{SplashScreen}； 从'@ionic native/status bar/ngx'导入{StatusBar}

@组成部分({ 选择器：'应用程序根'， templateUrl:'app.component.html'， 样式URL:['app.component.scss'] }) 导出类AppComponent{ 导航：任何； 建造师( 私有平台：平台， 私人splashScreen:splashScreen， 私有状态栏：状态栏 ) { 这个.sideMenu（）； 这是.initializeApp（）； } 侧菜单（） { 这个。导航=[ { 标题：“家”， url:“./home/home.module”， 图标：“家” }, { 标题：“聊天”， url:“./chat/chat.module”， 图标：“聊天室” }, { 标题：“联系人”， url:“./contacts/contacts.module”， 图标：“联系人” }, ] }

初始化EAPP（）{ this.platform.ready（）。然后（（）=>{ this.statusBar.styleDefault（）； 这个.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>

---

请注意，在我的app.component.html中，我声明了一个menuId，而不仅仅是id…。如果只使用id，则不会有任何更改，但使用menuId时，该页面的菜单将被禁用

这是我以前所做的，但这种方法的问题是，即使我没有将菜单按钮添加到auth页面，我也可以通过拖动它来访问菜单。我认为这是因为菜单是在app.component中定义的。我试着用菜单控制器禁用它，但没用。我已经对我的答案进行了编辑。您可以尝试使用菜单控制器，但使用menuId而不是普通id。如果它比路由方法更简单，很高兴能提供帮助！

<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() {
  }

}