angular - 离子延迟加载,路线不工作,离开后
问题描述
我有两个模块订单和产品。我已经懒惰地加载了他们的路线,一切都在第一次运行,问题是当我离开当前路线(订单),然后回到它,它不再工作了,我打电话我的“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>
//订单路由模块
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 { }
有人可以对我有所了解。在这一点上,我不知道该怎么办。据我所知,我所做的一切都是正确的。
解决方案
更改router-outlet
应ion-router-outlet
在 product.component.html 和 order.component.html 的 ion-content 中
<ion-content>
<ion-router-outlet></ion-router-outlet>
</ion-content>
推荐阅读
- javascript - 是否可以访问表外的 BTable 道具?
- google-sheets - 跨工作表的条件格式以基于大于比较突出显示单元格
- node.js - 如何在打字稿中合并来自不同文件的不同快递路线
- python - 具有图像尺寸的预测时的 Faster-RCNN Pytorch 问题
- ios - 将图像文件保存在文档目录中并从中获取图像文件并在 Objective C 中的视图上显示
- javascript - 当我使用 app.js 中的模板时,当我使用 zepto.js(甚至是 jquery)时,我无法通过 ajax 连接 php 代码
- python-3.x - 如何在特征(列)少于训练集的样本上测试 nlp 模型?
- unix - Sed 命令将检查我的文件的第二列并删除匹配的数据
- javascript - 如何在 javascript/jquery 中创建带有左窗格和可拖动对象的网页
- html - 在 Microsoft Dynamics CRM 中更改 html 代码的位置