如何基于URL在Angular中动态加载JSON内容

1. 配置动态路由规则 #

在app-routing.module.ts中定义带参数的路由，将所有类似/contact、/about的URL映射到同一个内容组件，同时捕获URL中的页面名称作为参数：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ContentComponent } from './content/content.component';

const routes: Routes = [
  // 动态捕获URL片段作为page参数，指向统一内容组件
  { path: ':page', component: ContentComponent },
  // 默认路由跳转至首页（需提前准备home.json）
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  // 404路由，处理不存在的页面请求
  { path: '**', redirectTo: '/404' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 在内容组件中加载对应JSON #

创建ContentComponent，通过ActivatedRoute获取路由参数，再用HttpClient加载对应的JSON文件：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {
  pageContent: any;

  constructor(
    private route: ActivatedRoute,
    private http: HttpClient
  ) { }

  ngOnInit(): void {
    // 订阅路由参数变化，支持直接访问URL和菜单导航两种场景
    this.route.paramMap.subscribe(params => {
      const pageName = params.get('page');
      if (pageName) {
        const jsonPath = `assets/content/${pageName}.json`;
        this.http.get(jsonPath).subscribe({
          next: (data) => this.pageContent = data,
          error: () => {
            // 加载失败时兜底显示404内容
            this.http.get('assets/content/404.json').subscribe(data => {
              this.pageContent = data;
            });
          }
        });
      }
    });
  }
}

3. 模板渲染内容 #

在content.component.html中根据JSON结构渲染内容（示例假设JSON包含title和content字段）：

<div *ngIf="pageContent" class="page-content">
  <h1>{{ pageContent.title }}</h1>
  <div [innerHTML]="pageContent.content"></div>
</div>

4. 前置准备工作 #

• 将JSON文件放在assets/content目录下，比如contact.json、about.json、home.json、404.json，确保Angular打包时会包含这些静态资源。
• 在AppModule中导入HttpClientModule，否则无法发起HTTP请求：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // ...其他模块
    HttpClientModule
  ]
})
export class AppModule { }

5. 菜单链接适配 #

菜单链接改用routerLink，保持和路由规则一致：

<nav>
  <a routerLink="/home">首页</a>
  <a routerLink="/about">关于我们</a>
  <a routerLink="/contact">联系我们</a>
</nav>
<router-outlet></router-outlet>

可选优化 #

• 添加路由守卫：校验page参数是否对应存在的JSON文件，避免无效请求。
• 缓存已加载的JSON内容，重复访问同一页面时无需重新请求。

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