关于angular:总结本周遇到的问题

42次阅读

共计 2373 个字符，预计需要花费 6 分钟才能阅读完成。

之前的文章中有写过在 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[可进行服务区查问]

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

由服务区治理查看修建进入

正文完