Angular 6基于同一组件内的几个不同的api调用路由多个参数，这只是糟糕的设计吗？

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

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

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

当我开始研究如何创建这背后的路由逻辑时，我只是对这可能如何工作并最终回到绘图板感到困惑 .

问题是，最好的方法是什么？到目前为止，有没有办法调整我的实现，还是应该重新设计它？也许用组件拆分？或继续使用属性存储参数，而不是访问控制器上的路由参数？这是一个关于如何生成最终表的示例：

Front-end ：

<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>

Controller ：

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);
  });
  }

Service ：

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

headers = headers.append(
  "Authorization",
  "Basic " + btoa("a14api:n3xtr3ml4bS")
);
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 });
}