离子菜单链接只能使用一次

Question

我正在使用 ionic angular 开发一个移动应用程序。我的屏幕底部有一个三个标签栏（路由工作正常）。在其中一个选项卡上，我有一个菜单，用于导航到该选项卡中的其他页面。但是，当使用菜单时，它似乎只工作一次？如果我刷新或移动到另一个选项卡并返回它只工作一次。我知道这是 angluar 4 中的一个错误，所以我运行了 npm i -g ionic/angular 希望解决这个问题。运行ionic -info我明白了

Ionic:

   Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 5.0.4
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.1.2

那么这个问题肯定应该得到解决吗？我现在认为这是我的路由错误

/app-routing-module.ts

const routes: Routes = [
  {
    path: '',
    redirectTo: 'app',
    pathMatch: 'full'
  },
  {
    path: 'app',
    loadChildren: () => import('./tabs/tabs.module').then( m => m.TabsPageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这是我的应用程序路由模块，它默认加载我的标签页

我的标签页有一系列子页面，它们都可以正常加载

./tabs-routing-module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'homemenu',
    pathMatch: 'full'
  },
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'homemenu',
        loadChildren: () => import('../homemenu/homemenu.module').then( m => m.HomemenuPageModule)
      },
      {
        path: 'settings',
        loadChildren: () => import('../settings/settings.module').then( m => m.SettingsPageModule)
      },
      {
        path: 'account',
        loadChildren: () => import('../account/account.module').then( m => m.AccountPageModule)
      },
    ]
  },

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class TabsPageRoutingModule {}

我的菜单页面默认加载主模块

./homemenu-routing-module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomemenuPage } from './homemenu.page';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {

    path: '',
    component: HomemenuPage,
    children: [
      {
        path: 'home',
        loadChildren: () => import('../home/home.module').then( m => m.HomePageModule),
      },
      {
        path: 'page2',
        loadChildren: () => import('../page2/page2.module').then( m => m.Page2PageModule),
      },
      {
        path: 'page3',
        loadChildren: () => import('../page3/page3.module').then( m => m.Page3PageModule),
      }
    ]
  },

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class HomemenuPageRoutingModule {}

我的菜单链接显示在我的 homemenu-page.ts 中

./homemenu-page.ts

import { Router, RouterEvent } from '@angular/router';

@Component({
  selector: 'app-homemenu',
  templateUrl: './homemenu.page.html',
  styleUrls: ['./homemenu.page.scss'],
})
export class HomemenuPage implements OnInit {
  pages =[
    {
      title: 'Home',
      url: 'home'

    },
    {
      title: 'Page2',
      url: 'page2'

    },
    {
      title: 'Page3',
      url: 'page3'

    },    
  ];

  selectedPath = '';

  constructor(private router: Router) {
    this.router.events.subscribe((event: RouterEvent) => {
      this.selectedPath = event.url;
    });
   }

  ngOnInit() {
  }

}

我已经按照路由完成了，看起来应该一切正常吗？我错过了什么？请注意，此问题适用于任何链接。如果我在菜单中加载任何链接，它将工作一次，直到我尝试再次导航并且它不会将我路由到新页面，菜单将消失但没有新页面或新 URL

更新：我已卸载 Ionic 并重新安装，但没有结果

npm uninstall ionic

npm install ionic

如果我右键单击菜单并在新选项卡中打开一切正常吗？ 如果我的路由看起来没问题，请告诉我，我将从帖子中删除该代码！

如果有帮助，这里是 homemenu.page.ts

import { Component, OnInit } from '@angular/core';
import { Router, RouterEvent } from '@angular/router';

@Component({
  selector: 'app-homemenu',
  templateUrl: './homemenu.page.html',
  styleUrls: ['./homemenu.page.scss'],
})
export class HomemenuPage implements OnInit {
  pages =[
    {
      title: 'Home',
      url: 'home'

    },
    {
      title: 'Page 1',
      url: 'page1'

    },
    {
      title: 'Page2',
      url: 'Page2'

    },    
  ];

  selectedPath = '';

  constructor(private router: Router) {
    this.router.events.subscribe((event: RouterEvent) => {
      this.selectedPath = event.url;
    });
   }

  ngOnInit() {
  }

}

Answer 1

我不知道这里的问题是否与routerLink有关，因为您没有完全发布组件的html文件。 您是否尝试在导航上使用其他方式？ 例如，（不工作）

在打字稿中

// custom.ts
import { Component, OnInit } from '@angular/core';

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

pageTitle = [
    {title: 'home', icon: 'home'}, {title: 'post', icon: 'reader'},
    {title: 'order', icon: 'list'}, {title: 'inbox', icon: 'mail'},
    {title: 'notification', icon: 'notifications'}
    ];

在html中

    <!-- custom.html --> 
<ion-item [routerLink]="[menu.title]" lines="none" *ngFor="let menu of pageTitle"> <ion-icon [name]="menu.icon" slot="start"></ion-icon> <ion-label>{{menu1.title | titlecase}}</ion-label> </ion-item>

解决方案： 您可以使用另一种方法，而不是使用 routerLink 属性。 使用事件绑定并调用以下函数来激活路由器。 你需要先注入这样的Router类。

例如（工作）

//custom.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
      selector: 'app-custom',
      templateUrl: './custom.component.html',
      styleUrls: ['./custom.component.scss'],})

export class MainComponent implements OnInit {

  constructor(private router: Router) {
   }

  ngOnInit() {}

  changeRoute(pageName){
    this.router.navigate([pageName]);
  }

}

在html中：

 <!-- custom.html --> 
<ion-item (click)="changeRoute(menu.title)" lines="none" *ngFor="let menu of pageTitle"> <ion-icon [name]="menu.icon" slot="start"></ion-icon> <ion-label>{{menu1.title | titlecase}}</ion-label> </ion-item>