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的tablsesize
console.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 FormArray
console.log("curTableSizeArr",curTableSizeArr)
curTableSizeArr.push(newdata)
console.log("curTableSizeArr",curTableSizeArr)
}
remove(){
let curTableSizeArr=this.tableSizeControls(this.actvieTabIndex) as FormArray
curTableSizeArr.removeAt(curTableSizeArr.length-1)
}
注意我们在add函数中定义的数据newdata其中的字段，没有minPerson，此时就会报错。此时需要我们核实字段。我们更改perTtile为minPerson以后。报错消失