Angular 2+ jQuery динамически добавляет routerLink в html

Question

У меня есть объект json, который я хочу показать на странице с подсветкой, сворачиванием и т. Д. ngx-json-viewer позволяет рендерить json с форматированием, сворачиванием и т. Д. В этом json есть определенные значения, которые я хочу преобразовать в гиперссылки. Я пытаюсь динамически добавить routerLink к этим значениям.

Я могу использовать jQuery, изменить json после его рендеринга и добавить привязки следующим образом:

main.find('.segment-key').each(function() {
  const key = $(this).html();
  if(key == replacement.key) {
    main.find('.segment-value').each(function() {
      let value = $(this).html();
      if(!_.startsWith(value, '<a')) {
        value = _.replace(value, '"', '');
        $(this).wrapInner(`<a href="${replacement.anchor}` + value + '" />');
      }
    });
  }
});

Якоря заставляют страницу обновляться. Я хотел бы заменить якоря на routerLink.

Любая помощь будет принята с благодарностью.

Спасибо

PS: Для всех, кто заинтересовался, я получил такое поведение, добавив событие click и обработав навигацию в контроллере:

main.find('.segment-key').each(function() {
  const key = $(this).html();
  if(key == replacement.key) {
    main.find('.segment-value').each(function() {
      let value = $(this).text();
      value = _.replace(value, new RegExp('\"','g'), '');
      if(!$(this).hasClass('hyperlink')) {
        $(this).addClass('hyperlink');
        $(this).on('click', function() {
          self.router.navigate([replacement.page, replacement.param + '/' + value]);
        });
      }
    });
  }
});

Answer 1

Вам не нужно jquery для динамического просмотра. Стандартный угловой компонент может справиться с этим.

Более того, я настоятельно рекомендую вам не использовать JQuery с Angular. Все, что вызвано JQuery, находится вне поля зрения Angular. При этом вам нужно будет ввести более сложную реализацию.

Вы бы лучше управляли своим DOM с помощью инструментов, предоставляемых самим Angular.