要根据路由动态显示 JSON 的一部分,你可以使用 Angular 的路由参数和数据绑定功能。以下是解决方法的代码示例:
const routes: Routes = [
{ path: 'json/:part', component: JsonComponent }
];
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-json',
template: '{{ json }}
'
})
export class JsonComponent implements OnInit {
json: any;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
// 从路由参数中获取要显示的 JSON 部分
const part = this.route.snapshot.paramMap.get('part');
// 根据部分名称获取相应的 JSON 数据
// 此处假设你有一个名为 jsonData 的对象,包含所有可能的 JSON 部分
this.json = jsonData[part];
}
}
{{ json }}
这样,当你导航到 /json/part1
或 /json/part2
等路径时,对应的 JSON 部分将被显示在页面上。
请注意,以上代码示例是一个简化的示例,假设你已经有一个名为 jsonData
的对象,其中包含了所有可能的 JSON 部分。在实际应用中,你可能需要从远程服务器获取 JSON 数据,或者使用 Angular 的 HttpClient 来进行数据请求和处理。