1 新バージョンのルートガードはcanActivateが廃止されたため関数関数を使用していますが、ルートオブジェクトをクラスのようにパラメータに注入することができません ルート最初のページジャンプを実現するにはどうすればよいでしょうか？
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
}
};ここでは、inject を使用してルーター オブジェクトを取得するために強制的に注入します。このようにして、配線ジャンプを実現できます。
2 ルートの遅延読み込みの場合、関連モジュールを app.module.ts と現在の module.ts に同時に導入する必要があります。それ以外の場合は、エラーが報告されます。例えば
「nz-form-control」は既知の要素ではありません。
理由は、NzFormModule は app.moudule.tsz にのみ導入されており、現在のページのコンポーネントのモジュールには導入されていないため、常にエラーが報告されることになります。
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> ここでのタブ ページのタブの名前は、cate フィールドに基づいて読み取られる必要があります。ここでの方法は、[nzTitle]="group.value.cate" を通じて取得することです。各コントロールには、その下に value 属性があり、これを通じて元の json データ オブジェクトを取得できます。
6 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>tabExtraContentカスタム テキスト コンテンツを含むテンプレート参照を定義することによって。次に、要素を内部でnz-tabset使用し、ディレクティブを使用して、参照されたコンテンツをページ上の指定された場所にレンダリングします。<ng-container>*ngTemplateOutlettabExtraContent
このようにして、デフォルトの「+」スタイルをカスタム テキスト (「追加」ボタン) に置き換えて、ページ内で正しくレンダリングすることができます。
7. グループ データを formArray オブジェクトに追加するときは、各項目のフィールド名が一致している必要があることに注意してください。一致していないとエラーが報告されます。
RROR エラー: パス「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 の最後の 2 つの formControlNames は 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 に変更します。エラーが消えます
8 Angular のインターセプターはバックエンドから返されるデータをどのように単純化しますか?
バックエンドから返されるデータ レベルが深すぎる場合、レベルを簡素化し、特定のリクエストで簡略化されたデータを取得するにはどうすればよいでしょうか?
@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
})
)
}
}
核心はマップ関数にあります。なお、戻り値を変更したい場合はcloneメソッドを使用する必要があり、イベントを直接変更することは無効となります。
9: app.module.ts は ReactiveFormsModule と FormsModule を導入しましたが、依然としてエラーを報告しました: 「form」の既知のプロパティではないため、「formGroup」にバインドできません。
理由: ページコンポーネントが app.module.ts で宣言されていません
@NgModule({
declarations: [
AppComponent,
LayoutComponent,
HomeComponent,
NewsComponent,
NotfoundComponent,
StoreformComponent,
AboutComponent,
LoginComponent,
FormpageComponent //注意这里
// AdminComponent
],10:エラー NullInjectorError: R3InjectorError(StoreEditModule)[NzMessageService -> NzMessageService -> NzMessageService -> NzMessageService]:
NullInjectorError: NzMessageService のプロバイダーがありません。
NzMessageServiceを導入する場合。エラーを報告してください。この理由は、現在のモジュールのプライベート オプションに設定がないためです。
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 { }