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来动态化您的视图。 Standart Angular组件可以处理此问题。

此外，我强烈建议您避免将jQuery与Angular一起使用。 jQuery触发的任何事情都不在Angular的视线范围内。 这就是说，您将不得不以一种更复杂的实现方式进行输入。

您最好使用Angular本身提供的工具来操作DOM。