Javascript Angular 9-如何根据路由动态显示json的一部分

大家好， 我有点困了，希望你能帮助我。 因此，我只想显示Json的一部分，这取决于我所使用的路由。 Json可能如下所示：

[
  {
    "Key": "string",
    "Rule1": [
      {}
    ],
    "Rule2" : [
       {}    
    ]
}
]

到目前为止，我已经设法在一个指令中显示所有json，使json可折叠

因此，当我单击选项卡时，我只想显示json的一部分。示例：我单击“键”选项卡，只得到“键”json属性中的内容，依此类推。。。 我得到了3个组件：property、propertyTab和jsondisplay（没有提到指令）。 在我的属性组件中，我将以下内容放在模板文件的顶部：

<app-property-tab [property]="property"></app-property-tab>

我的模板非常简单：

<li>
    <a (click)="Rule1()" >
        Rule1
    </a>
</li>
<li>
    <a(click)="onWatchRule2()">
        Rule2
    </a>
</li>

以及模板：

<app-property-tab [property]="property"></app-property-tab>

<h3>{{ allData.propertyKey }}</h3>

<br/>
<div class="ats-form-group ml-4"  style="height: 100%; background-color: white;" *ngFor="let data of [allData]">
    <div [appJsonFormatter]="data.rule"></div>
</div>

{{allData.propertyKey}}

---

因此，我想知道的是如何根据我们单击的选项卡仅显示json的一部分。因为我在这里唯一能做的就是获取所有json或一个部分，但绝不是动态的，也绝不是在单击选项卡时。任何帮助都将不胜感激，谢谢。

找到获取所选选项卡的方法。订阅活动并在知道所选内容后更改内容。谢谢。事实上，这就是我所想的。订阅活动和更改内容，我想，将是令人愉快的部分。但是我不知道如何获得所选的标签。你有什么想法吗？谢谢你，伙计。

export class JsonDisplayComponent implements OnInit {
    allData: any;
    name: any;
    Key: string;
    @Input() property: Property;

  constructor(
    private route: ActivatedRoute,
    private blablaService: blablaService,
    private jsonDisplayService: JsonDisplayService) { }

  ngOnInit() {
      this.route.params
      .subscribe(
          (params: Params) => {
            this.propertyKey = params['propertyKey'];
            this.property = this.blablaService.getProperty(this.Key);
          }
      );

      this.jsonDisplayService.getProperty(this.Key).subscribe((data: any) => {
          this.allData = data;
          this.name = data.Key;
          console.log(this.allData)
      })

  }

}

<app-property-tab [property]="property"></app-property-tab>

<h3>{{ allData.propertyKey }}</h3>

<br/>
<div class="ats-form-group ml-4"  style="height: 100%; background-color: white;" *ngFor="let data of [allData]">
    <div [appJsonFormatter]="data.rule"></div>
</div>