Маршрутизация Angular 6 из события щелчка уведомлений на рабочем столе браузера приводит к неожиданному поведению - PullRequest
Новая
       7

Маршрутизация Angular 6 из события щелчка уведомлений на рабочем столе браузера приводит к неожиданному поведению

0 голосов
/ 04 июня 2018

Я создал контрольный пример для воспроизведения проблемы, которую я вижу, основываясь на документации Routing Angular и live demo foundтам.

Демонстрационная версия была немного изменена, поэтому на рабочем столе браузера запрашиваются уведомления, а в app.component.ts [откуда-то вставлен код уведомления браузера] отображается простое уведомление.

Обратите вниманиеобработчика уведомлений onclick ниже.Он просто входит в консоль и переходит к одному из исходных маршрутов приложения. 

notification.onclick = function () {
        console.log('onclick');
        self.router.navigate(['/heroes']);
      };

Чтобы воспроизвести проблему, обязательно Открыть в новом окне и разрешите приложению отображать уведомления на рабочем столе при появлении соответствующего запроса.,Уведомление будет показано сразу после предоставления разрешений.При нажатии на уведомление вы заметите, что маршрутизатор переходит на новый URL, но ничего не отображается.Вывод консоли показывает «onclick», как и ожидалось, но не ngOnInit().heroes.component.ts также был изменен для вывода ngOnInit(), как показано ниже, но этого никогда не происходит.Если бы вы нажали кнопку Heroes, ngOnInit() сработал бы так, как ожидалось. 

ngOnInit() {
  console.log('ngOnInit');
  this.getHeroes();
}

После небольшой отладки выясняется, что маршрутизатор перемещается должным образом, компонент heroes получаетсоздается (как вызывается конструктор), но ngOnInit() никогда не выполняется.

Похоже, что контекст onclick уведомления на рабочем столе браузера как-то портит внутренности Angular.Это то, что на самом деле происходит?Это какая-то ошибка Angular?

Я также пытался использовать ng-push , но наблюдается то же поведение.

В моем полном приложении естьодна небольшая разница в поведении.ngOnInit() вызывается в конце концов, но это занимает до 10 секунд после выполнения конструктора компонента.Кажется, что браузер бездействует, не потребляя ЦП в течение периода ожидания.

Я сбит с толку.Есть идеи?Как получается, что маршрутизация работает нормально, когда кнопка нажата, но она демонстрирует это странное поведение при использовании из обработчика щелчков уведомления на рабочем столе браузера?

Обратите внимание, что я протестировал в последней версии Chrome (67.0.3396.87), Firefox (60.0.2) и Edge (все в Windows 10 с последними обновлениями).

Ответы [ 2 ]

0 голосов
/ 13 июня 2018

Я не уверен почему, но метод запускается за пределами угловой зоны.Вот почему URL меняется, а Angular не обнаруживает его, поэтому ngOnInit не вызывается.Обратите внимание, что он запускается, например, при нажатии кнопки очистки сообщения.Вы можете просто исправить это, запустив его в зоне: 

notification.onclick = () => {
    this.zone.run(() => {
        console.log('onclick');
        this.router.navigate(['/heroes']);
    });
};

constructor(private router: Router, private zone: NgZone) {

}
0 голосов
/ 13 июня 2018

Пример работает и для меня.

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

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: true
    })
  ],
  exports: [RouterModule]
})
export class AppRouting {}

Если это не решит вашу проблему, вам следует включить трассировку маршрутизатора, надеюсь, это поможет вам выяснить, откуда возникла проблема: 

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: true,
      enableTracing: true
    })
  ],
  exports: [RouterModule]
})
export class AppRouting {}

Ваш маршрут / компонент загружен лениво или с нетерпением?

...