我在主路径中有一些子路径，我想在单击使用角度和电子的主路径时首先加载默认的子路径。 首先会加载子路由，但问题是子菜单未显示活动链接，并且表单验证不起作用。但是一旦我点击了子菜单，它就会开始正常工作，或者如果我点击主菜单两次，它就会工作。 因此问题似乎出在子路径第一次未正确加载时。 这是我的应用程序路由模块。
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
我在另一个组件中也有相同的错误，但是它工作正常。
答案 0 :(得分：1)
尝试
<div class="ui fluid three item menu pointing" dir="rtl">
<a class="item" [routerLink]="['/expenses/','service']" [routerLinkActive]="['active','orange']">خدماتی</a>
<a class="item" [routerLink]="['/expenses/','salary']" [routerLinkActive]="['active','orange']">معاشات</a>
<a class="item" [routerLink]="['/expenses/','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>