Как убрать обновление страницы с routerLink?

Для того чтобы убрать обновление страницы при использовании routerLink, нужно применить стратегию загрузки OnPush, которая обновляет только те компоненты, значения в которых изменились.

Для начала, удостоверьтесь, что вы импортировали ChangeDetectionStrategy из @angular/core в компоненте, где используете routerLink.

Затем, в компоненте, где у вас находится <router-outlet>, примените стратегию загрузки OnPush.

Например, в компоненте app.component.ts, вы можете добавить следующую строку кода:

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush // применяем стратегию загрузки OnPush
})
export class AppComponent {}

После этого, при использовании routerLink в вашем шаблоне, страница больше не будет обновляться. Например:

<a routerLink="/some-route">Ссылка без обновления страницы</a>

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

import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {
  data: any;

  constructor(private cd: ChangeDetectorRef) {}

  updateData() {
    // Логика для обновления данных
    this.cd.markForCheck(); // Пометить компонент для обновления
  }
}

Вот и все! Теперь у вас есть подробный ответ на вопрос, как убрать обновление страницы с routerLink в Angular.