Angular中为ngx-json-viewer渲染的JSON动态添加routerLink

直接通过jQuery修改DOM的方式会绕过Angular的变更检测和指令编译机制，这就是为什么你的routerLink不生效、普通a标签导致页面刷新的原因。ngx-json-viewer本身支持自定义模板，我们可以用这个特性来优雅地实现带routerLink的JSON值渲染，完全不需要操作DOM。

步骤1：确认ngx-json-viewer版本支持模板 #

确保你使用的是v3.0.0及以上版本的ngx-json-viewer，这个版本开始支持自定义模板功能。

步骤2：在组件模板中配置自定义渲染模板 #

在你的组件HTML里，给ngx-json-viewer添加自定义的ng-template，用来处理需要转换为路由链接的特定JSON键值：

<ngx-json-viewer [json]="yourJsonData">
  <!-- 自定义值渲染模板，接收value和key参数 -->
  <ng-template let-value let-key="key" ngxJsonViewerValue>
    <!-- 判断当前键是否是你需要转换的目标键 -->
    <ng-container *ngIf="key === replacement.key; else defaultRender">
      <!-- 使用Angular的routerLink绑定路由参数 -->
      <a 
        [routerLink]="[replacement.page, replacement.param + '/' + value.replace(/"/g, '')]"
        style="color: #1976d2; text-decoration: underline;"
      >
        {{ value }}
      </a>
    </ng-container>

    <!-- 默认渲染逻辑：如果不是目标键，就用常规方式展示值 -->
    <ng-template #defaultRender>
      <span>{{ value }}</span>
    </ng-template>
  </ng-template>
</ngx-json-viewer>

步骤3：在组件类中定义相关数据 #

在你的组件TypeScript文件里，定义JSON数据和路由替换规则：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent {
  // 你的原始JSON数据
  yourJsonData = {
    id: "123",
    name: "Sample Data",
    targetKey: "456" // 假设这是你要转换为链接的键
  };

  // 路由替换配置（和你之前的replacement对象一致）
  replacement = {
    key: 'targetKey',
    page: 'detail',
    param: 'itemId'
  };
}

为什么这个方案更好？ #

1. 符合Angular最佳实践：完全不需要操作DOM，所有渲染逻辑由Angular的模板引擎处理，自动支持变更检测。
2. routerLink直接生效：因为a标签是Angular模板的一部分，routerLink指令会被正常编译，不会导致页面刷新，而是使用Angular的单页路由。
3. 可维护性更高：逻辑集中在模板和组件类中，比jQuery操作DOM更清晰，也更容易扩展（比如添加多个目标键的处理）。

如果你使用的是旧版本ngx-json-viewer #

如果你的版本不支持自定义模板，可以通过自定义valueFormatter结合Angular的Renderer2来动态创建带routerLink的元素，但这种方式相对繁琐。更推荐升级到最新版本的ngx-json-viewer来使用模板功能。

内容的提问来源于stack exchange，提问作者Yogesh