在页面之间导航时未调用 ngAfterViewInit答案

【问题标题】：ngAfterViewInit is not getting called while navigating between pages在页面之间导航时未调用 ngAfterViewInit
【发布时间】：2019-08-07 20:52:37
【问题描述】：

购物车页面

import { Component, OnDestroy, AfterViewInit, OnInit, AfterContentInit, ChangeDetectorRef, } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router'
import { StorageService } from '../data/storage.service';
import { DataProviderService } from '../data/data-provider.service';
import * as _ from 'lodash';
@Component({
  selector: 'app-cart',
  templateUrl: './cart.page.html',
  styleUrls: ['./cart.page.scss'],
})
export class CartPage implements AfterViewInit, AfterContentInit, OnDestroy, OnInit {

  cartItems = [];
  totalAmount = 0;

  constructor(public cart: StorageService, private cdRef: ChangeDetectorRef, public dataProvider: DataProviderService, private router: Router, private route: ActivatedRoute) {
  }



  ngOnInit() {

    console.log("Init callled")
  }

  async ngAfterViewInit() {
    console.log("Lets check!!");
    console.log("\n\n\n\nthis is init func");
  }
}

详情页

import { Component, OnInit, OnDestroy, AfterViewInit, ChangeDetectorRef, ChangeDetectionStrategy, AfterContentInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DataProviderService } from '../data/data-provider.service';
import { UtilsService } from '../data/utils.service';
import { StorageService } from '../data/storage.service';
import { Router, NavigationEnd } from '@angular/router'
import * as _ from 'lodash';

@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements AfterViewInit, AfterContentInit, OnDestroy {
  constructor(private route: ActivatedRoute, private cdRef: ChangeDetectorRef, public dataProvider: DataProviderService, public utils: UtilsService, public cart: StorageService, private router: Router) {

  }

  ngAfterViewInit() {
   console.log("Details page view Init");
  }
  ngOnDestroy() {
    console.log("I'm destroying details!!");
  }
  ngAfterContentInit() {
    console.log("View content is triggered");
  }

路由器模块

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

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'details/:category/:id', loadChildren: './details/details.module#DetailsPageModule',runGuardsAndResolvers: 'always'},
  { path: 'products/:category', loadChildren: './products/products.module#ProductsPageModule' },
  { path: 'products/:category/:market', loadChildren: './products/products.module#ProductsPageModule' },
  { path: 'reports', loadChildren: './reports/reports.module#ReportsPageModule' },
  { path: 'news', loadChildren: './news/news.module#NewsPageModule' },
  { path: 'buy', loadChildren: './buy/buy.module#BuyPageModule' },
  { path: 'Offers', loadChildren: './offers/offers.module#OffersPageModule' },
  { path: 'cart', loadChildren: './cart/cart.module#CartPageModule' , runGuardsAndResolvers: 'always'},
  { path: 'checkout', loadChildren: './checkout/checkout.module#CheckoutPageModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes,{onSameUrlNavigation: 'reload'})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

当我第一次加载页面时，它会调用函数ngAfterViewInit。但是当我导航到其他路线并返回时，ngAfterViewInit 没有被调用。

如果我们重新加载页面，ngOnInit 将不会被调用。所以我使用ngAfterViewInit 这没有帮助。这是预期的行为吗？

如何在每次用户导航到页面时执行功能？

【问题讨论】：

您是否正在使用路由更改整个组件？或者你的组件对于两个页面都是稳定的？
检查导航到另一条路线时是否调用了 ngOnDestroy。如果不是，则意味着您的组件仍在加载。检查您的路由配置 - 也许您有嵌套路由？
@UbiquitousDevelopers，用例是，我将向本地存储添加一条记录。当我回到这个页面时，需要读取存储并重新绘制。两个页面的组件不同。
@Shahar，对于这个页面，ngDestroy 没有被调用。当我从上一页导航时，它调用了destroy。在导航到其他页面时，不会为此页面调用 ngDestroy。我在应用程序组件中附加了 routerEvent 。如何手动触发 ngDestroy？
@SantoshHegde 你不应该手动调用 ngOnDestroy。它是组件生命周期的一部分，并在组件被销毁时自动调用。

标签： angular ionic-framework angular6 ionic4

【解决方案1】：

您可以订阅路由器事件https://angular.io/guide/router#router-events

【讨论】：