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

Question

我在 Angular 6 中制作了一个单页应用程序，它有 4 个级别的元数据，您 select 最后它构建了一个 table 文档基于select离子。

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

现在我遇到的问题是我希望能够根据结果在每一步中设置路由，并且能够link 不完整的查询或至少最终文件 table。

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

问题是，最好的方法是什么？到目前为止有没有办法调整我的实现，或者我应该重新设计它？也许按组件拆分？或者停止使用属性来存储参数，而是访问控制器上的路由参数？下面是如何生成最终 table 的示例：

前端：

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

Answer 1

经过几个月的学习，我可以说这确实是一个糟糕的设计。

最终实现了带有 reducer 增强器的 redux 架构，以在您发出 Web 请求时存储应用程序的状态。

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

Angular 6 routing multiple parameters based on several different api calls within the same component, is this just bad design?

html

architecture

angular-routing

angular

angular-router