Angular 6基于同一组件中的多个不同api调用来路由多个参数，这只是不好的设计吗？

我在Angular 6中制作了一个单页应用程序，它具有4个级别的元数据供您选择，最后，它基于该选择构建了一个包含文档的表。

第一组按钮通过HTTP get初始化，然后使用ngFor进行迭代。每个按钮都有其自己的属性。生成表的最后一个按钮具有4个自定义属性，将其与HTTP调用一起作为参数发送给后端，后端又产生相关的文档数组。

现在，我遇到的问题是，我希望能够基于结果的每一步都有路由，并且能够链接到不完整的查询或至少链接到最终文档表。

当我开始研究如何在其背后创建路由逻辑时，我最终对它可能如何工作感到困惑，最终回到了绘图板上。

问题是，这样做的最佳方法是什么？到目前为止，是否有办法适应我的实现，还是应该重新设计它？也许按组件拆分？还是停止使用属性来存储参数，而是访问控制器上的路由参数？这是一个关于如何生成决赛桌的示例：

前端：

    <mat-step>
  <ng-template matStepLabel>
    <h4>
      {{ step3 }}
    </h4>
  </ng-template>
  <div fxLayout="row" fxLayoutGap="10px" fxFlex="90%" fxLayoutAlign="start center" id="lvl3row">
    <div class="list-group" *ngFor="let button of lvl3">

      <!-- LVL3 buttons -->
      <button matStepperNext [attr.data-param1]="button['md:0/413349530_Level 0 – Section'] |lvl0clean" [attr.data-param2]="button['md:0/413349601_Level 1 – Series Header'] |lvl1clean"
        [attr.data-param3]="button['md:0/413349649_Level 2 – Series Sub Header'] | lvl1clean" [attr.data-param4]="button['md:0/413349651_Level 3 – Location'] | lvl1clean"
        [routerLink]="['docs', button['md:0/413349530_Level 0 – Section'] | lvl0clean | routeCleanPipe ]" mat-raised-button
        color="accent" class="btn btn-secondary" (click)="reveallvl5($event)">
        {{ button['md:0/413349651_Level 3 – Location'] | lvl1clean }}
      </button>
    </div>
  </div>
</mat-step>

控制器：

  reveallvl5($event) {
   this.service
   .generateTable(
    $event.target.attributes["data-param1"].value,
    $event.target.attributes["data-param2"].value,
    $event.target.attributes["data-param3"].value,
    $event.target.attributes["data-param4"].value
  )
  .subscribe(data => {
    this.lvl5docs = data;
    console.log(data);
    console.log($event.target.attributes["data-param1"].value);
    console.log($event.target.attributes["data-param2"].value);
    console.log($event.target.attributes["data-param3"].value);
    console.log($event.target.attributes["data-param4"].value);
  });
  }

服务内容：

generateTable(param1, param2, param3, param4) {
let headers = new HttpHeaders();

headers = headers.append(
  "Authorization",
  "Basic " + btoa("a14api:testPass")
);
headers = headers.append(
  "Content-Type",
  "application/x-www-form-urlencoded"
);

const params = new HttpParams()
  .append("lvl1param", param1)
  .append("lvl2param", param2)
  .append("lvl3param", param3)
  .append("lvl4param", param4);

return this.http.get(this.ROOT_URL + "lvl5docs", { params, headers });
}