Summarize the problems encountered this week

In the previous article, I wrote about the problems when thy-form and formgroup are used in combination, and it was directly determined that they could not be used at the same time. In later attempts, it was found that they can be used at the same time. Let's talk about the problems encountered when using them.
Original article: Documenting recent problems

Since the sample code given does not show the use of formGroup, you can only try to access formGroup in other tags.

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

Its corresponding submission method is to bind through thyFormSubmit, but try to change it to click and find that it can be executed normally.
This raises the question, why not just use the most primitive (click) binding to the button to submit it?
It is also said that the two have the same effect, but it is only because of our usage habits that we always bind through (ngSubmit).
The following is the official explanation of ngSubmit, by configuring ngsumit to monitor the event of the button being clicked.
It is to automatically call the bound method when the Submit button is clicked.


In summary, the reason why these binding methods are introduced is more to unify the writing method and make it more convenient to configure.

The reason why I said this problem this time is that there were other errors when submitting the method through the click connection before. I thought it was an error caused by this, but there was no error when I reproduced it again from memory, so I have guesses about the error. When you need to verify your conjecture first, you can't trust yourself too much.

Let's talk about a small problem we encountered this week. We need to deal with the following situations:
The current page is the service area management. The service area management can view the buildings in the current service area, but the building management is also a column in the menu. The problem is how to transfer the service area ID to the building management. To be able to view all buildings, you can also click to view buildings in the service area list to view only the buildings that belong to this service area.

Previously, for viewing XX under XXX, the parameters were passed directly through the routing path (serviceArea/1/building), but it is obviously not applicable in this case or it is not impossible if you insist on using it, you can let the routing Both building and serviceArea/1/building jump to the building page, that is, the following configuration

 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)
      },
]

After the configuration is completed, the data is obtained as before, but this will cause the routing to be very confusing and inconvenient to operate. We must not take it.

So far, if we want to pass data between components, in addition to the parent-child component relationship or setting cache in the service layer, there is only routing, so we naturally thought of passing data through query parameters.

We just need to add query parameters to the query building button

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

After that, you can get it by subscribing to the routing parameters.

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

If we want to remove the query parameters, we can do the following:

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

So in the end our logical processing is

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

Accessed from the menu (or click to view all service areas):

View Building Access by Service Area Management