【发布时间】：2021-01-28 12:53:37
【问题描述】：
我在主路由中有一些子路由我希望在单击主路由时首先加载默认子路由我正在使用角度和电子。 子路由确实首先加载，但问题是子菜单不显示活动链接并且表单验证不起作用。但是，一旦我单击子菜单，它就会开始正常工作，或者如果我单击主菜单两次，它就会工作。 所以问题似乎是第一次没有正确加载子路由。 这是我的应用路由模块。
const routes: Routes = [
{ path: '',pathMatch: 'full', redirectTo: '/incomes' },
{ path: 'incomes', component: IncomesComponent},
{ path: 'incomelist',component: IncomeListComponent},
{ path: 'expenses', component: ExpensesComponent, children:[
{path : '', pathMatch: 'full', redirectTo: 'service'},
{path: 'service', component: ServiceExpenseComponent},
{path: 'salary', component: SalaryExpenseComponent},
{path: 'other', component: OtherExpenseComponent}
]},
{ path: 'reports', component: ReportsComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
这是子路由链接所在的费用组件。
<div class="ui fluid three item menu pointing" dir="rtl">
<a class="item" routerLink="service" [routerLinkActive]="['active','orange']">خدماتی</a>
<a class="item" routerLink="salary" [routerLinkActive]="['active','orange']" >معاشات</a>
<a class="item" routerLink="other" [routerLinkActive]="['active','orange']">دیگر</a>
</div>
<div class="ui segment">
<router-outlet></router-outlet>
</div>
这是主侧边栏。
<div class="ui visible inverted right vertical sidebar thin menu" style="width: 180px;" dir="rtl">
<div class="item">
<div class=" header">عواید</div>
<div class="menu">
<a class="ui item" routerLink="incomes" >عاید جدید</a>
<a class="ui item" routerLink="incomelist">لیست عواید </a>
</div>
</div>
<div class="item">
<div class=" header">مصارف</div>
<div class="menu">
<a class="ui item" routerLink="expenses" >مصرف جدید</a>
</div>
</div>
</div>
我也尝试过延迟加载，但也有同样的问题。我只是找不到问题。 编辑： 我还添加了 service_expense html 和 ts 以备不时之需。
<form class="ui form" dir="rtl" [formGroup]="serviceForm" (ngSubmit)="ngOnAddOrUpdate()">
<div class="ui large header center" style="text-align: center;"> فورم رسید مصرف خدماتی جدید</div>
<p></p><p></p>
<div class="required field">
<label>نوع خدمت</label>
<select formControlName="service_type">
<option value="">نوع خدمت</option>
<option *ngFor="let v of income_types" [value]="v">{{ v }} </option>
</select>
</div>
<div class="required field">
<label>نمبر مسلسل</label>
<input type="number" placeholder="نمبر مسلسل" formControlName="service_id">
</div>
<div class="required field">
<label>مقدار پول</label>
<input type="number" placeholder="مقدار پول" formControlName="amount">
</div>
<div class="field">
<label>ملاحظات</label>
<input type="number" placeholder="ملاحظات" formControlName="expense_description">
</div>
<div class="required field">
<label>تاریخ رسید</label>
<input type="date" formControlName="given_date">
</div>
<div class="required field">
<label>دریافت کننده</label>
<select formControlName="receiver">
<option value="">دریافت کننده</option>
<option *ngFor="let k of receiver_list" [value]="k.id">{{ k.name }} </option>
</select>
</div>
<button class="positive ui button" type="submit" [disabled]="!serviceForm.valid">ذخیره</button>
</form>
服务费用ts文件。
export class ServiceExpenseComponent implements OnInit {
serviceForm: FormGroup;
income_types;
receiver_list;
constructor(private mainService: MainService) {
this.income_types = this.mainService.getIncomeTypes();
this.receiver_list = this.mainService.getShareHolders();
}
ngOnInit(): void {
this.serviceForm = new FormGroup({
service_type: new FormControl('',Validators.required),
service_id: new FormControl('',Validators.required),
amount: new FormControl('',Validators.required),
expense_description: new FormControl(''),
given_date: new FormControl('',Validators.required),
received_by: new FormControl('',Validators.required)
});
}
ngOnAddOrUpdate(){
console.log(this.serviceForm.value);
console.log(this.serviceForm.valid);
}
}
EDIT2：控制台日志
(electron) Security Warning: webFrame.executeJavaScript was called without worldSafeExecuteJavaScript enabled. This is considered unsafe. worldSafeExecuteJavaScript will be enabled by default in Electron 12.
Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
Policy set or a policy with "unsafe-eval" enabled. This exposes users of
this app to unnecessary security risks.
For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
main.e265e149dcdc1172b723.js:1 ERROR TypeError: Cannot read property 'validator' of null
at Mm (main.e265e149dcdc1172b723.js:1)
at t.addControl (main.e265e149dcdc1172b723.js:1)
at t._setUpControl (main.e265e149dcdc1172b723.js:1)
at t.ngOnChanges (main.e265e149dcdc1172b723.js:1)
at t.Ne (main.e265e149dcdc1172b723.js:1)
at Ln (main.e265e149dcdc1172b723.js:1)
at Nn (main.e265e149dcdc1172b723.js:1)
at Fn (main.e265e149dcdc1172b723.js:1)
at Qi (main.e265e149dcdc1172b723.js:1)
at Zi (main.e265e149dcdc1172b723.js:1)
{service_type: "", service_id: "", amount: "", expense_description: "", given_date: "", …}
main.e265e149dcdc1172b723.js:1 false
我在另一个组件中也有同样的错误，但它工作正常。
【问题讨论】：