1 La nueva versión de Route Guard usa una función porque canActivate ha sido abandonado, pero el objeto de ruta no se puede inyectar en sus parámetros como una clase. ¿Cómo realizar el salto de página en el primer lugar de la ruta?
import { CanActivateFn, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { inject } from "@angular/core"
export const authguardGuard: CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
console.log("route", route)
console.log("state", state)
const router: Router = inject(Router)
if (localStorage.getItem("token")) {
if (state.url == '/login') {
router.navigate(['/home'])
return true
} else {
return true
}
} else {
console.log("1")
if (state.url !== "/login") {
router.navigate(['/login'])
}
return true
}
};Aquí, inyectar se utiliza para forzar la inyección para obtener el objeto enrutador. De esta manera se pueden lograr saltos de enrutamiento.
2 Para la carga diferida de rutas, los módulos relevantes deben introducirse en app.module.ts y en el module.ts actual al mismo tiempo. De lo contrario, se informará un error. Por ejemplo
'nz-form-control' no es un elemento conocido:
La razón es que NzFormModule solo se introduce en app.moudule.tsz, pero no se introduce en el módulo del componente de la página actual, lo que genera un error que se informa todo el tiempo.
3 Para que el componente nz-space en nozzor-antd surta efecto, se debe agregar *nzSpaceItem
4. Cómo obtener el valor del atributo del objeto actual a través de los datos recorridos en la plantilla, de la siguiente manera:
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> El nombre de la pestaña en la página de pestañas aquí debe leerse según el campo cate. El método aquí es obtenerlo a través de [nzTitle]="group.value.cate". Para cada control, hay un atributo de valor debajo, a través del cual se puede obtener el objeto de datos json original.
6 ¿Cómo agregar contenido extra a pestañas en zorro?
<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>Definiendo tabExtraContentuna referencia de plantilla que contenga contenido de texto personalizado. Luego, nz-tabsetuse <ng-container>el elemento internamente y use *ngTemplateOutletdirectivas para tabExtraContentrepresentar el contenido al que se hace referencia en la ubicación especificada de la página.
De esta manera, puede reemplazar el estilo "+" predeterminado con texto personalizado (botón "Agregar") y hacer que se muestre correctamente en la página.
7. Al agregar datos de grupo al objeto formArray, recuerde que los nombres de los campos de cada elemento deben corresponder; de lo contrario, se informará un error.
Error de RROR: No se puede encontrar el control con la ruta: 'tamaño de tabla -> tamaño de grupo -> 0 -> tamaño de tabla -> 2 -> minPerson'
Por ejemplo:
<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>Tenga en cuenta que los dos últimos formControlNames en ngfor son minPerson y maxPerson. A continuación, agregue nuevos datos al formArray en el archivo js.
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)
}Tenga en cuenta que el campo en los datos nuevos que definimos en la función agregar no tiene minPerson, y se informará un error en este momento. En este punto necesitamos verificar los campos. Cambiamos perTtile a minPerson más tarde. El error desaparece
8 ¿Cómo simplifica el interceptor en Angular los datos devueltos por el backend?
Si el nivel de datos devuelto por el backend es demasiado profundo, ¿cómo simplificar el nivel y obtener los datos simplificados en una solicitud específica?
@Injectable()
export class AuthInterceptorInterceptor implements HttpInterceptor {
constructor() {}
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
let reqClone=request.clone({
setHeaders:{token:localStorage.getItem("token")||""}
})
return next.handle(reqClone).pipe(
map((event:any)=>{
if(event instanceof HttpResponse){
event=event.clone({body:event.body.data.data.data})
}
return event
}),
catchError((err:HttpErrorResponse)=>{
console.log("err",err);
throw err
})
)
}
}
El núcleo radica en la función de mapa. Al mismo tiempo, cabe señalar que si queremos cambiar el valor de retorno debemos utilizar el método de clonación, cambiar directamente el evento no es válido.
9: app.module.ts introdujo ReactiveFormsModule y FormsModule, pero aún así informó un error: No se puede vincular a 'formGroup' ya que no es una propiedad conocida de 'form'.
Motivo: el componente de la página no está declarado en app.module.ts
@NgModule({
declarations: [
AppComponent,
LayoutComponent,
HomeComponent,
NewsComponent,
NotfoundComponent,
StoreformComponent,
AboutComponent,
LoginComponent,
FormpageComponent //注意这里
// AdminComponent
],10:ERROR NullInjectorError: R3InjectorError(StoreEditModule)[NzMessageService -> NzMessageService -> NzMessageService -> NzMessageService]:
NullInjectorError: ¡No hay proveedor para NzMessageService!
Al presentar NzMessageService. Informar un error. La razón de esto es que no hay ninguna configuración en la opción privada del módulo actual:
constructor(private fb:FormBuilder,private message:NzMessageService){
this.validateForm=this.fb.group({
storename:[''],
})
}
ngOnInit(){
const id = this.message.loading('加载中..', { nzDuration: 0 }).messageId;
setTimeout(() => {
this.message.remove(id);
//回显赋值
//this.validateForm.patchValue(data)
}, 3000);
}import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StoreEditRoutingModule } from './store-edit-routing.module';
import { StoreEditComponent } from './store-edit.component';
import { ReactiveFormsModule, FormsModule, FormGroup, FormBuilder, FormArray } from '@angular/forms';
import { NzFormModule} from 'ng-zorro-antd/form';
import { NzMessageService } from 'ng-zorro-antd/message';
@NgModule({
declarations: [
StoreEditComponent
],
imports: [
CommonModule,
StoreEditRoutingModule,
NzBreadCrumbModule,
],
providers: [{provide: NzMessageService}], //这里是核心
})
export class StoreEditModule { }