如何使用 Angular 动态生成并展示原始 JSON 对象

{
  "hello": ""
}

import { Component, inject, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { firstValueFrom, Subscription } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'echo',
    template: `
        <pre>{{ jsonData | json }}</pre>
    `,
    styles: [`
        /* 可选：为 pre 标签添加一些样式，使其更像原始 JSON 输出 */
        pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 4px;
            font-family: monospace;
            color: #333;
        }
    `]
})
export class Echo implements OnInit, OnDestroy {
    private http = inject(HttpClient);
    private queryParamSubscription: Subscription | undefined;
    private readonly activatedRoute = inject(ActivatedRoute);

    jsonData: any;

    async ngOnInit(): Promise<void> {
        // 订阅 queryParamMap，以便在 URL 查询参数变化时更新 JSON 数据
        this.queryParamSubscription =
            this.activatedRoute.queryParamMap.subscribe(async (map): Promise<void> => {
                // 从 URL 查询参数中获取 'input' 和 'jsonPath'
                const input = map.get('input') as string;
                const jsonPath = map.get('jsonPath') as string;

                if (!jsonPath) {
                    // 如果没有提供 jsonPath，可以设置一个默认的错误或空 JSON
                    this.jsonData = { error: "jsonPath query parameter is required." };
                    return;
                }

                try {
                    // 调用辅助方法获取 JSON 模板数据
                    const jsonFileData = await this.getJsonData(jsonPath);

                    // 根据 'input' 参数动态修改 JSON 数据
                    // 这里的逻辑可以根据实际需求进行扩展
                    if (jsonFileData && typeof jsonFileData === 'object' && 'hello' in jsonFileData) {
                        jsonFileData.hello = input || "default_value"; // 如果 input 不存在，提供一个默认值
                    } else {
                        // 如果模板结构不符合预期，可以创建新的结构
                        this.jsonData = { input_received: input, original_template: jsonFileData };
                        return;
                    }

                    // 更新组件的 jsonData 属性，触发视图更新
                    this.jsonData = jsonFileData;
                } catch (error) {
                    console.error('Error fetching or processing JSON data:', error);
                    this.jsonData = { error: "Failed to load or process JSON template.", details: (error as Error).message };
                }
            });
    }

    /**
     * 从 assets 文件夹获取 JSON 数据。
     * @param path JSON 文件的路径，例如 'hello.json'。
     * @returns 包含 JSON 数据的 Promise。
     */
    getJsonData(path: string): Promise<any> {
        // 使用 HttpClient 获取 JSON 文件
        // firstValueFrom 用于将 Observable 转换为 Promise
        return firstValueFrom(this.http.get<any>(`assets/${path}`));
    }

    ngOnDestroy(): void {
        // 在组件销毁时取消订阅，防止内存泄漏
        if (this.queryParamSubscription) {
            this.queryParamSubscription.unsubscribe();
        }
    }
}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Echo } from './echo.component'; // 导入 Echo 组件

const routes: Routes = [
  // 其他路由...
  { path: 'echo', component: Echo },
  // 默认路由或通配符路由...
];

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // 导入 HttpClientModule

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Echo } from './echo.component'; // 导入 Echo 组件

@NgModule({
  declarations: [
    AppComponent,
    Echo // 声明 Echo 组件
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule // 添加 HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ng serve

{
  "hello": "world"
}