在 ionic 4 中使用 router.navigate 时，构造函数或 ngoninit 没有调用，有角度答案

【问题标题】：constructor or ngoninit is not calling when used router.navigate in ionic 4 with angular在 ionic 4 中使用 router.navigate 时，构造函数或 ngoninit 没有调用，有角度
【发布时间】：2020-01-10 08:31:53
【问题描述】：

我正在使用 ionic 4 和 angular 当登录状态为假时，我正在从主页导航到登录

this.router.navigateByUrl('/login');

以及登录后从登录页面到主页

this.router.navigateByUrl('/home');

我的路由器模块是

从'@angular/core'导入{ NgModule }；导入 { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
},
{
path: 'list',
loadChildren: () => import('./list/list.module').then(m => m.ListPageModule)
},
{ path: 'acceptordermodalpage', loadChildren: './acceptordermodalpage/acceptordermodalpage.module#AcceptordermodalpagePageModule'},
{ path: 'newordermodalpage', loadChildren: './newordermodalpage/newordermodalpage.module#NewordermodalpagePageModule' },
{ path: 'rejectordermodalpage', loadChildren: './rejectordermodalpage/rejectordermodalpage.module#RejectordermodalpagePageModule' },
{ path: 'orderdetailsmodalpage', loadChildren: './orderdetailsmodalpage/orderdetailsmodalpage.module#OrderdetailsmodalpagePageModule' },
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' }
];

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

现在的问题是当我从一个页面/组件导航到另一个页面/组件时，ngoninit 或目标页面/组件的构造函数不会触发

但是当我使用 routerlink 导航时它可以工作

[routerLink]="[p.url]"

我在网上搜索到了一些建议并应用了它们

在路由器模块中改为

imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, onSameUrlNavigation: 'reload' })
],

我将以下内容放入源页面和目标页面/组件构造函数/ngoninit

this.router.routeReuseStrategy.shouldReuseRoute = () => {
  return false;
};

我也申请了 NgZone

this.ngZone.run(() => {
    this.router.navigateByUrl('/login');
  });

但在使用 router.navigateByUrl() 后似乎没有任何方法可以触发 ngoninit 或构造函数

谁能帮忙。

【问题讨论】：

您能告诉我我的回答是否有效吗？
你的问题解决了吗？

标签： angular ionic-framework angular-ui-router ionic4

【解决方案1】：

我认为您需要使用 ionViewDidLoad。像下面这样使用

 ionViewDidLoad() {
   // your ngoninit function's code 
  }

有关详细信息，请查看 Ionic 导航生命周期事件。 https://ionicframework.com/blog/navigating-lifecycle-events/

【讨论】：

我没有使用 NavController 所以这个方法不会被触发

【解决方案2】：

我们可以每次使用 this.navCtrl.navigateBack(Ionic's) 调用 ngOnInit 或 Constructor。如果我们不使用(navigateBack)，我们就不能调用 ngOnInit 或 Constructor。

（为什么不每次都调用ngOnInit）：：当路由进入离子框架中的堆栈时（它将路由存储在堆栈内）不会从开始重新初始化

navCtrl.navigateBack 它将使堆栈中的所有现有页面都将被删除，导航页面将成为堆栈中的单个页面。

invoking ngOnInit & constructor stackblitz

invoking ngOnInit & constructor github

注意：检查上述网址中的console.logs。（检查 'home' 和 'list' 文件夹中的 .ts 文件）

【讨论】：

为我工作:)