angular踩坑

1 新版路由守卫由于canActivate已被废弃，采用函数函数，但其参数中无法像类一样进行路由对象注入，如何实现路由首位中的页面跳转？

import { CanActivateFn,Router,ActivatedRouteSnapshot, RouterStateSnapshot,} from '@angular/router';
import{inject} from "@angular/core"export const authorGuard: CanActivateFn = (route:ActivatedRouteSnapshot, state:RouterStateSnapshot) => {if(localStorage.getItem("token")){}else{// const router = route?._routerState._root.injector.get(Router) as Router; // 获取Router实例const router =inject(Router); // 通过参数注入 Router 对象router.navigate(['/login']); // 导航到登录页面// this.router.navigate(['/login']); // 导航到登录页面return false; // 阻止导航到目标路由}return true;
};

这里采用inject强制注入得到router对象。这样就可以实现路由的跳转

2 对于路由懒加载方式，需要在app.module.ts和当前module.ts中同时引入相关模块。否则会报错。比如

'nz-form-control' is not a known element:

原因就是NzFormModule只在app.moudule.tsz中引入了，但是却没有在当前页面的组件的module中引入导致一直报错

3 nozzor-antd中的nz-space组件要想生效，必须加入*nzSpaceItem

4 模板中遍历的数据如何获取当前对象的属性值，如下：

constructor(private fb:FormBuilder){this.validateForm=this.fb.group({storename:[''],tableSize:this.fb.group({toggle:['true'],groupSize:this.fb.array([this.fb.group({cate:['indoor'],title_en:[''],title_zh:[''],}),this.fb.group({cate:['outdoor'],title_en:[''],title_zh:[''],}),]),}),})}<form  class="store_generate_form" nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"><nz-form-item><nz-form-label [nzSpan]="8" nzFor="storename">店铺名称</nz-form-label><nz-form-control [nzSpan]="16"><input nz-input name="storename" type="storename" formControlName="storename"></nz-form-control></nz-form-item ><div><nz-form-item><nz-tab [nzTitle]="group.value.cate" *ngFor="let group of groupSize.controls; let i = index" [formGroupName]="i"></nz-form-item>   </div>    

这里的tab标签页的tab的名称要根据cate字段来读取。这里的方式是通过[nzTitle]="group.value.cate"来获取的。对于每一个control而言，其下都有一个value属性，通过value属性就可以获取到原始的json数据对象

6 zorro中如何实现tabs标签页添加额外内容？

  <nz-tabset   nzType="card" formArrayName="groupSize" [nzTabBarExtraContent]="extraContent" (nzAdd)="addTab()"><ng-template #extraContent><button nz-button nzType="dashed">Add</button></ng-template><nz-tab nzIcon="book" ><ng-template nz-tab>tab中的内容xxxx</ng-template></nz-tab><ng-container *ngTemplateOutlet="extraContent"></ng-container></nz-tabset>

通过定义tabExtraContent模板引用，其中包含自定义的文本内容。然后，在nz-tabset内部使用<ng-container>元素，并使用*ngTemplateOutlet指令将tabExtraContent引用的内容渲染在页面指定位置。

通过这种方式，你可以将默认的"+"样式替换为自定义的文本（"Add"按钮），并在页面中正确渲染。

7 给formArray对象添加group数据的时候，切记每一项的字段名称要对应，否则会报错

RROR Error: Cannot find control with path: 'tableSize -> groupSize -> 0 -> tableSize -> 2 -> minPerson'

例如：

<nz-tab nzIcon="book" [nzTitle]="group.value.cate" *ngFor="let group of groupSize.controls; let i = index" [formGroupName]="i"><div formArrayName="tableSize">  <ng-template nz-tab><nz-form-item *ngFor="let table of tableSizeControls(i)?.['controls']; let j = index" [formGroupName]="j"><nz-form-control><div class="danamic_group"> <div class="danamic_group_item"><nz-input-group nzAddOnBefore="Key" ><input nz-input type="text" nz-input  formControlName="size"/></nz-input-group></div><div class="danamic_group_item" ><nz-input-group nzAddOnBefore="EN" ><input nz-input type="text" nz-input  formControlName="desc_en"/></nz-input-group></div><div class="danamic_group_item" ><nz-input-group nzAddOnBefore="CH"><input nz-input  type="text" nz-input  formControlName="desc_zh"/></nz-input-group></div><div class="danamic_group_item" ><nz-input-group nzAddOnBefore="number"><input nz-input type="text" nz-input  formControlName="number"/></nz-input-group></div><div class="danamic_group_item" ><nz-input-group ><nz-input-number [nzMin]="1" type="text" nz-input  formControlName="minPerson"/></nz-input-group></div><div class="danamic_group_item"><nz-input-group ><nz-input-number [nzMin]="1" type="text" nz-input  formControlName="maxPerson"/></nz-input-group></div></div></nz-form-control></nz-form-item>  </ng-template>                  </div></nz-tab>

注意在ngfor中最后两个formControlName分别是minPerson和maxPerson，接下来在js文件中给formArray添加一条新的数据

get groupSize(): FormArray {  return this.validateForm.get('tableSize.groupSize') as FormArray;}tableSizeControls(index:number): FormArray {let list=this.validateForm.get('tableSize.groupSize') as FormArray;let lastlist=list.controls[index].get('tableSize') as FormArray ||[]return lastlist}add(){//先找到是indoor还是outdoor的tablsesizeconsole.log("this.activeTab",this.actvieTabIndex)let newdata=this.fb.group({size: [""],desc_en:[""],desc_zh: [""],number:[''],preTitle: [""],maxPerson: [],})let curTableSizeArr=this.tableSizeControls(this.actvieTabIndex) as FormArrayconsole.log("curTableSizeArr",curTableSizeArr)curTableSizeArr.push(newdata)console.log("curTableSizeArr",curTableSizeArr)}remove(){   let curTableSizeArr=this.tableSizeControls(this.actvieTabIndex) as FormArraycurTableSizeArr.removeAt(curTableSizeArr.length-1)}

注意我们在add函数中定义的数据newdata其中的字段，没有minPerson，此时就会报错。此时需要我们核实字段。我们更改perTtile为minPerson以后。报错消失