子路径未初始加载到angular中

Question

我在主路由中有一些子路由，我想要一个默认子路由，当我点击我使用的角度和电子的主路由时，会加载一个默认子路由。子路由一开始确实会加载，但问题是子菜单没有显示活动链接，并且表单验证不起作用。但是一旦我单击子菜单，它就开始正常工作，或者如果我在主菜单上单击两次，它就会工作。所以问题似乎是第一次子路由没有正确加载。这是我的应用路由模块。

       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

我在另一个组件中也有相同的错误，但它工作得很好。

Answer 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>