Предупреждение директивы Angular 7 routerLink «Навигация запущена за пределами зоны Angular»

Он видит ошибку, попробуйте это как обходной путь

constructor(private ngZone: NgZone, private router: Router) {}

public navigate(commands: any[]): void {
    this.ngZone.run(() => this.router.navigate(commands)).then();
}

Мы столкнулись с этой ошибкой, когда перемещались где-то в нашем решении.

В нашем компоненте боковой панели мы используем обнаружение изменений при нажатии, и у нас был один this.ref.detectChanges(), когда произошла маршрутизация (изменение параметров), что каким-то образом нарушило маршрутизацию (возможно, выбив параллельно работающие преобразователи из ngZone или что-то подобное). После изменения этого параметра на предпочтительный в любом случае this.ref.markForCheck() эта ошибка больше не появлялась. Я рад, что нам не понадобился обходной путь, хотя поведение странное..

Надеюсь, это поможет любому, у кого есть такая же проблема.

Поскольку принятого ответа нет, и поскольку я обнаружил, что с помощью Angular 8 ответ с самым высоким рейтингом не совсем работает и требует немного больше пояснений, я могу добавить следующее:

Моя конкретная проблема была с ag-grid, но я подозреваю, что любое место, куда внедряется компонент, внутри *ngFor или где-то еще, потенциально может вызвать эту проблему. Это очень близко к предыдущему ответу, но вместо этого объявляет строковый параметр в функции навигации, а затем вызывает navigationByUrl вместо навигации.

import { Component, NgZone } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  template: `<tag (click)="navigate(path)">clickable text</tag>`
})

constructor(private ngZone: NgZone, private router: Router) { }

public navigate(path: string): void {
  this.ngZone.run(() => this.router.navigateByUrl(path)).then();
}

Ваш пробег может отличаться, но это прекрасно сработало для меня.

Для меня эта ошибка была из-за того, что часть кода выполнялась за пределами NgZone. После чего у нас был запущен this.ref.detectChanges() для обнаружения изменений. Обнаруженные изменения изменят DOM и поставят <a [routerLink]="..."></a>. Это используется для нарушения маршрутизации. Решение: мы запустили часть кода за пределами NgZone внутри NgZone, но с использованием this.ngZone.run. Таким образом, нам не нужно было использовать ref.detectChanged(), так как измененная (подписка на RxJS Subject) находилась в NgZone. Это решило проблему маршрутизации.

Надеюсь, это поможет любому, у кого есть такая же проблема.

Рабочий пример - обратитесь к этому

 public backButtonSubscription;
      ngAfterViewInit(): void {
        let self = this;
        this.backButtonSubscription = this.platform.backButton.subscribe(() => {
          console.log("back preseed \n \n");
    
          self._ngZone.runOutsideAngular(() => {
            setTimeout(() => {
              self.Router.navigateByUrl("/stock-management");
            }, 100);
          });
        });
      }