Перехватить ссылку и перенаправить с маршрутизатора из компонента

Question

Поскольку я не могу связать угловые директивы с помощью [innerHTML], я заменил все routerlink на обычную <a href=link> ссылку.Теперь я хочу, чтобы пользователь нажимал на ссылку, чтобы перехватить ее, перенаправив ее с маршрутизатора из компонента.

Пример:

Hello <a href=world>world</a>

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

  This.router.navigate('world');

Возможно ли это?Если да, как это сделать?

Answer 1

Попробуйте поместить функцию Click) с параметром, а затем перевести логику навигации в функцию щелчка, если это поможет.

Answer 2

Вам нужно каким-то образом захватить элемент DOM ¹ и прикрепить к нему прослушиватель событий, а затем использовать обычный API DOM для перехвата щелчка.

«Самый угловой»Чтобы получить элемент, нужно поместить на него ссылку с символом #:

<a href=world #ref>world</a>

Теперь из класса вы можете получить ссылку со следующим оформленным свойством.

@ViewChild('ref') refEl: ElementRef<HTMLAnchorElement>

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

this.refEl.nativeElement.addEventListener('click', e => {
  // handler here
})

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

this.router.push('page')

Не забудьте e.preventDefault(), иначе браузер все равно сделает свою работу и отправит запрос на сервер.для новой страницы.

---

¹ Это становится немного сложнее, если вашему приложению требуется поддержка какого-либо универсального рендеринга (например, рендеринга на стороне сервера).