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的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以后。报错消失

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试