angular - 在页面之间导航时未调用 ngAfterViewInit

Question

购物车页面

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 这没有帮助。这是预期的行为吗？

我如何在每次用户导航到页面时执行一个函数？

Answer 1

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