总结本周遇到的问题

之前的文章中有写过在thy-form 与 formgroup 联合使用时出现的问题，当时直接认定它们不能同时使用。在后来的尝试中发现可以同时使用，下面来讲一下使用时遇到的问题。
原文章： 记录最近遇到的问题

由于所给的示例代码中并没有给出配合formGroup使用的情况，所以只能尝试在其他标签中接入formGroup。

<form thyForm name="demoForm" #demoForm="thyForm" #demoNgForm="ngForm" class="ml-4">
  <thy-form-group [formGroup]="formGroup" thyLabelText="名称" thyLabelRequired thyTipsMode="label">
    <input [formControlName]="formKeys.name" thyInput class="ml-4" name="name" required
           placeholder="请输入名称"/>
  </thy-form-group>
<thy-form-group-footer>
  <button [disabled]="formGroup.invalid" [thyButton]="'primary'" (thyFormSubmit)="onSubmit(formGroup)">
    提交
  </button>
</thy-form-group-footer>
</form>

它的相对应的提交方式是通过 thyFormSubmit 进行绑定，但是尝试着把它改为 click 发现也可以正常执行。
这就出现了一个问题，为什么不直接使用最原始的（click）绑定到button从而进行提交呢？
还时说两者作用相同只是由于我们的使用习惯才导致总是通过（ngSubmit）进行绑定。
下面是官方对于ngSubmit的解释，通过配置ngsumit来监听按钮被点击的事件。
就是在点击Submit按钮时自动调用所绑定的方法。


综上之所以引入这些绑定方法更多的是为了统一写法，配置起来更方便。

这次之所以说这个问题更多的是之前在通过click连接提交方法时出现了其他错误，当时以为是由此引发的错误但是后来再次凭记忆复现时并没有出现错误，所以在对错误有猜想时要先验证自己的猜想，并不能太相信自己。

再来说一下本周遇到的一个小问题
有如下情形需要我们进行处理：
当前页面是服务区管理，服务区管理可以查看 当前服务区的建筑，但是建筑管理也是菜单中的一栏，问题就是如何把服务区ID传到建筑管理中。做到可以查看所有的建筑也可以在服务区列表中点入查看建筑从而只查看属于本服务区的建筑。

之前对于查看XXX下的XX都是直接通过路由路径来传递参数即（serviceArea/1/building），但是很明显在此种情况下并不适用或者说如果硬要使用的话也不是不行,可以让路由 building和 serviceArea/1/building都跳转到建筑页面，即如下配置

service-area-routing.module.ts:

const routes: Routes = [
.   .   .
  {
    path: ':id/building',
    loadChildren: () => import('../building/building.module').then(m => m.BuildingModule)
  }
]

app-routing.module.ts:

const routes: Routes = [
.   .   .
   {
        path: 'serviceArea',
        loadChildren: () => import('./service-area/service-area.module').then(m => m.ServiceAreaModule)
      },
      {
        path: 'building',
        loadChildren: () => import('./building/building.module').then(m => m.BuildingModule)
      },
]

配置完之后再和之前一样获取数据但是这样的话就会导致路由很混乱操作起来也并不方便，我们肯定是不能采取的。

我们目前为止组件间要想传递数据的话除了是父子组件关系或者在服务层设置缓存之外就只剩路由了，那么我们理所当然就想到了可以通过查询参数来传递数据。

我们只需要在查询建筑button中加入查询参数即可

 <button thyButton="success" class="mr-2 " [thySize]="'sm'" routerLink="../building" 
    [queryParams]="{serviceAreaId: serviceArea.id}">
     <thy-icon thyIconName="eye"></thy-icon>
     查看建筑
 </button>

之后再通过订阅路由参数获取即可

this.route.queryParams
        .subscribe((data) => {
          this.serviceAreaId = data['serviceAreaId']
}

如果我们想去除查询参数进行如下操作即可

this.route.queryParams
      .subscribe(
        (data) => {
          this.router.navigate([], {
            queryParams: {
              'serviceAreaId': null,
            }
          })
        }
      )

所以最后我们的逻辑处理就是

graph TD
 Q[菜单] -->|查看建筑| B(跳转到建筑列表)
    A[服务区列表] -->|查看建筑| B(跳转到建筑列表)
    B --> C{通过查询参数获取服务区ID}
    C -->|获取到了| D[可进行服务区查询]
    C -->|没获取到| E[显示当前服务区 不可进行服务区查询]
 E -->|点击查看所有建筑| D[可进行服务区查询]

由菜单进入（或点击查看所有服务区）：

由服务区管理查看建筑进入