如何实现点击home.html链接展示home.ts中对应JSON内容？

首先得提醒你：你定义的JSON里部分HTML标签没闭合（比如<b>缺少对应的</b>），先修正一下避免渲染时出现异常~

1. 完善 home.ts 代码 #

在组件类里，我们需要新增一个变量存储要展示的内容，再写一个处理点击事件的方法：

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

@Component({
  selector: 'app-home',
  templateUrl: './home.html',
  styleUrls: ['./home.css']
})
export class HomeComponent {
  // 修正标签闭合问题后的JSON数据
  public json_html = { 
    "button1":"<p><b>first section</b></p>", 
    "button2":"<p>second section</p>", 
    "button3":"<p><b>third section</b></p>", 
  };

  // 存储要展示的内容，支持追加模式
  public displayContent: string = '';

  // 处理按钮点击的方法
  showSection(buttonKey: string) {
    // 按照你需求的追加模式，把对应内容加到displayContent里
    this.displayContent += this.json_html[buttonKey];
    // 如果想改成替换模式（每次点击只显示当前内容），就用下面这行：
    // this.displayContent = this.json_html[buttonKey];
  }
}

2. 编写 home.html 页面 #

这里用Angular的事件绑定和属性绑定实现，尽量避免直接操作DOM（这是Angular的最佳实践）：

<!-- 三个操作按钮（如果要改成链接样式，把button换成a标签即可） -->
<button (click)="showSection('button1')">Button 1</button>
<button (click)="showSection('button2')">Button 2</button>
<button (click)="showSection('button3')">Button 3</button>

<!-- 内容展示区域 -->
<div id="c1" [innerHTML]="displayContent"></div>

如果你坚持要用原生JS操作DOM（不推荐） #

要是你一定要用document.getElementById的方式，也可以在方法里这么写，但要注意Angular的变更检测逻辑：

showSection(buttonKey: string) {
  const contentEl = document.getElementById('c1');
  if (contentEl) {
    contentEl.innerHTML += this.json_html[buttonKey];
  }
}

对应的HTML里展示区域保留<div id="c1"></div>，按钮的点击事件绑定不变就行。

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