Обнаружить обновление браузера в угловом проекте?

Приложение Angular — это одностраничное приложение, и в контексте одностраничного приложения полное приложение загружается один раз, а данные или экраны обновляются по мере того, как пользователь использует ваше приложение.

Обновление браузера эквивалентно закрытию приложения и его повторному запуску. В вашем приложении Angular нет способа по умолчанию ответить на это.

Возможно, вы сможете смоделировать что-то, используя onBeforeUnload() для регистрации того, что приложение было перезагружено; а затем проверьте этот журнал в процедуре инициализации вашего приложения, чтобы выполнить какое-то специальное действие.

I want to detect when page is refresh using router

Вы добавляете преобразователь высший уровень к маршрутизатору. Если у вас есть один маршрутизатор верхнего уровня, он будет разрешен только один раз, и дочерние узлы будут обрабатывать навигацию по страницам. Каждый раз, когда резолвер разрешается, он эквивалентен обновлению страницы в браузере.

const routes: Routes = [
  {
    path: '',
    component: TopComponent,
    resolve: { loaded: PageLoadedResolver },
    children: [
         ...
    ]
  }
];

Есть много других способов обнаружения события загрузки страницы в Angular.

Конструктор вашего AppModule.

@NgModule({...})
export class AppModule {
     public constructor() {
          console.info('page loaded');
     }
}

Служба, введенная в корень, которая используется хотя бы один раз.

@Injector({provideIn: 'root'})
export class MyService {
     public constructor() {
          console.info('page loaded');
     }
}

Существует также файл main.ts, который загружает приложение Angular.

    platformBrowserDynamic().bootstrapModule(AppModule)
        .then(() => console.info('page loaded'))
        .catch(err => console.error(err));

По сути, везде, где есть JavaScript, который запускается один раз...

попробуй это

  this.router.events
    .pipe(filter((rs): rs is NavigationEnd => rs instanceof NavigationEnd))
    .subscribe(event => {
      if (
        event.id === 1 &&
        event.url === event.urlAfterRedirects 
      ) {
       ..... // here your code when page is refresh
      }
    })

Вам нужно будет импортировать

import { filter } from 'rxjs/operators'
import { Router  } from '@angular/router';

В компоненте .ts

import { Subscription } from 'rxjs';

export let browserRefresh = false;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent implements OnDestroy {

  subscription: Subscription;

  constructor(private router: Router) {
    this.subscription = router.events.subscribe((event) => {
        if (event instanceof NavigationStart) {
          browserRefresh = !router.navigated;
        }
    });
  }

на нужной вам странице

import { browserRefresh } from '../app.component';

....

  ngOnInit() {
    this.browserRefresh = browserRefresh;
    console.info('refreshed?:', browserRefresh);
  }

См. рабочий пример здесь https://stackblitz.com/edit/refreshangular?file=src%2Fapp%2Fpage-a%2Fpage-a.component.ts

Нажмите на страницу A и страницу B и обновите страницу, чтобы увидеть разницу

Новейший способ в Angular 7+, теперь мы можем добавлять свойства навигации по маршруту.

Итак, если /somepage — это страница, которую мы хотим определить, был ли обновлен браузер, мы устанавливаем свойство навигации prevPage, когда переходим на эту страницу:

this.router.navigate(['/somepage'], { state: { prevPage: this.router.url } });  

Затем внутри какой-то страницы:

ngOnInit(): void {
    const previousUrl = history.state.prevPage ?? null;
    if (!this.previousUrl) {
      console.info('page was refreshed!');
    } else {
      console.info('I came here from: ', previousUrl);
    }
}

Примечание: Это работает, если вы хотите обнаружить обновление браузера с определенной страницы.

Если вам это нужно на всем сайте, я бы выбрал другой подход.