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。