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

Метод 1. Использование службы определения местоположения.
Первый метод предполагает использование службы Location, предоставляемой Angular. Эта служба позволяет вам манипулировать URL-адресом браузера и переходить на другой маршрут. Чтобы обновить текущую страницу, вы можете вызвать метод reloadслужбы Location, как показано ниже:

import { Location } from '@angular/common';
constructor(private location: Location) {}
refreshPage() {
  this.location.reload();
}

Метод 2: перезагрузка текущего маршрута
Если вы хотите обновить текущий маршрут, не уходя от него, вы можете использовать сервис Router, предоставляемый Angular. Вызвав метод navigateс URL-адресом текущего маршрута, Angular перезагрузит текущую страницу. Вот пример:

import { Router } from '@angular/router';
constructor(private router: Router) {}
refreshPage() {
  this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
    this.router.navigate([this.router.url]);
  });
}

Метод 3: использование метода window.location.reload().
Альтернативный подход — напрямую использовать метод window.location.reload()для обновления страницы. Этот метод просто перезагружает текущий документ. Вот как его можно использовать в TypeScript:

refreshPage() {
  window.location.reload();
}

Метод 4: использование перехватчика жизненного цикла ngOnInit.
Другой способ обновить страницу — использование перехватчика жизненного цикла ngOnInit. Реализовав этот хук в своем компоненте, вы можете запускать обновление страницы при каждой инициализации компонента. Вот пример:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-my-component',
  template: '...',
})
export class MyComponent implements OnInit {
  ngOnInit() {
    window.location.reload();
  }
}

Метод 5. Использование тега meta.
Этот метод предполагает добавление пользовательского тега metaв HTML-файл. Изменяя атрибут contentтега meta, вы можете заставить браузер обновить страницу. Вот пример:

<meta http-equiv="refresh" content="0">

В этой статье мы рассмотрели несколько методов обновления страниц в Angular 8 с помощью TypeScript. Предпочитаете ли вы использовать сервисы Angular, такие как Locationи Router, полагаться на метод JavaScript window.location.reload()или использовать жизненный цикл ngOnInitкрючок, теперь в вашем распоряжении множество техник. Выберите метод, который лучше всего соответствует вашим требованиям, и наслаждайтесь плавным обновлением страниц в приложениях Angular 8.