离子延迟加载，路线不工作，离开后

Question

我有两个模块订单和产品。我已经懒惰地加载了他们的路线，一切都在第一次运行，问题是当我离开当前路线（订单），然后回到它，它不再工作了，我在我的“login.component”上调用了这条路线，这似乎是问题所在，因为如果我调用产品，它的产品路线不起作用。 url 改变但组件不会改变，下面是我的设置。

Github 仓库：https://github.com/markanthonybanong/routing

//app.component.html

<ion-app>
  <ion-menu contentId="menu-content" menuId="menu-content" side="start" type="overlay">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Start Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-menu-toggle>
          <ion-item routerLink="/order">
            <ion-icon name="clipboard-outline" slot="start"></ion-icon>
            <ion-label>Order</ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-menu-toggle>
          <ion-item routerLink="/product">
            <ion-icon name="terminal-outline" slot="start"></ion-icon>
            <ion-label>Product</ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="menu-content"></ion-router-outlet>
</ion-app>

//app-routing.module

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

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./login/login.module').then(m => m.LoginModule)
  },
  {
    path: 'order',
    loadChildren: () => import('./order/order.module').then(m => m.OrderModule),
  },
  {
    path: 'product',
    loadChildren: () => import('./product/product.module').then(m => m.ProductModule),
  },

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

//login.component.ts

  import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
  public myForm: FormGroup;
  constructor(
    public formBuilder: FormBuilder,
    private router: Router
  ) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      username: [null, Validators.required],
      password: [null, Validators.required]
    }); 
  }

  onSignUp(): void {
    if(this.myForm.value.username === "admin" && this.myForm.value.password === "admin"){
      this.router.navigateByUrl('/order');
    }
  }

}

//order.component.html

  <ion-header>
    <ion-toolbar>
      <ion-title>
        ORDER
      </ion-title>
      <ion-buttons slot="start">
        <ion-menu-button auto-hide="false" (click)="openMenu()"></ion-menu-button>
      </ion-buttons>
    </ion-toolbar>
    <ion-toolbar>
      <ion-segment (ionChange)="onSegmentChanged($event)" value="order-list">
        <ion-segment-button value="order-list">
          <ion-label>Order List</ion-label>
        </ion-segment-button>
        <ion-segment-button value="add-order">
          <ion-label>Add Order</ion-label>
        </ion-segment-button>
      </ion-segment>
    </ion-toolbar>
  </ion-header>
  <router-outlet></router-outlet>

//order-routing.module

   import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddOrderComponent } from './add-order/add-order.component';
import { OrderListComponent } from './order-list/order-list.component';
import { OrderComponent } from './order/order.component';

const routes: Routes = [
  {
    path: '',
    component: OrderComponent,
    children: [
      { path: '', redirectTo: 'order-list', pathMatch: 'full'},
      { path: 'order-list', component: OrderListComponent},
      { path: 'add-order', component: AddOrderComponent},
    ]
  }
];

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

//product.component.html

<ion-header>
  <ion-toolbar>
    <ion-title>PRODUCT</ion-title>
    <ion-buttons slot="start">
      <ion-menu-button auto-hide="false"></ion-menu-button>
   </ion-buttons>
  </ion-toolbar>
   <ion-toolbar>
    <ion-segment value="product-list" (ionChange)="segmentChanged($event)">
      <ion-segment-button value="product-list">
        <ion-label>Product List</ion-label>
      </ion-segment-button>
      <ion-segment-button value="add-product">
        <ion-label>Add Product</ion-label>
      </ion-segment-button>
    </ion-segment>
   </ion-toolbar>
</ion-header>
<router-outlet></router-outlet>

//product-routing.module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddProductComponent } from './add-product/add-product.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductComponent } from './product/product.component';

const routes: Routes = [
  {
    path: '',
    component: ProductComponent,
    children: [
      { path: '', redirectTo: 'product-list', pathMatch: 'full'},
      {path: 'product-list', component: ProductListComponent},
      {path: 'add-product', component: AddProductComponent},
    ]
  }
];

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

谁能帮我解释一下。在这一点上，我不知道该怎么办。据我所知，我所做的一切都是正确的。

Answer 1

将 router-outlet 更改为 ion-router-outlet 应该在 product.component.html 和 order.component.html 的 ion-content 中

<ion-content>
    <ion-router-outlet></ion-router-outlet>
 </ion-content>

链接文档：https://ionicframework.com/docs/api/router-outlet