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

    })
  }


 

            
                店铺名称
                
                
                
            
             

                
                     
                    
            
    

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

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

  

                
                                Add
                
                
                         
                                tab中的内容xxxx
                        


                

                
  

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

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

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

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

例如：

注意在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以后。报错消失