Блог

У меня есть несколько дочерних маршрутов внутри основного маршрута, я хочу, чтобы дочерний маршрут по умолчанию загружался изначально, когда я нажимаю на основной маршрут, который я использую angular и electron. Дочерний маршрут загружается сначала, но проблема в том, что дочернее меню не показывает активную ссылку, и проверка формы не работает. но как только я нажимаю на дочернее меню, оно начинает работать правильно, или если я дважды нажимаю на главное меню, оно работает. таким образом, проблема, по-видимому, заключается в том, что дочерний маршрут не загружается должным образом в первый раз. это мой модуль маршрутизации приложения.

        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);
  }
}
  

ПРАВКА2: журнал консоли

 (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
  

У меня такая же ошибка и в другом компоненте, но она работает нормально.

попробуйте это

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