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。

Angular 2+ jQuery动态将routerLink添加到html

1 个答案: