ngAfterViewInit не вызывается при навигации по страницам - PullRequest
Новая
       13

ngAfterViewInit не вызывается при навигации по страницам

3 голосов
/ 17 марта 2019

Страница корзины 

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, который не помогает. Это ожидаемое поведение?

Как выполнить функцию при каждом переходе пользователя на страницу?

1 Ответ

0 голосов
/ 18 марта 2019

вы можете подписаться на события роутера https://angular.io/guide/router#router-events

...