Я не могу перейти к другому компоненту в Angular.

 <div class="mr-3 ml-3 mt-0 mb-4 leave_card_outer" *ngIf="leaveStatus !=null">
    <div class="row bg-white p-2">
      <div class="col py-3 leave_card_inner" *ngFor="let status of leaveStatus | keyvalue; index as index">
        <a [routerLink]="['dstatus-fr']" class=""  (click)="setViewData(status.key)">
          <h3>{{ status.key | lowercase | translate | titlecase}}</h3>
          <p class="mt-3 mb-0 card_text"
            [ngClass]="getStatuskColor(status.key)">
            {{status.value}}</p>
        </a>
      </div>
    </div>
  </div>

Это мой HTML файл

setViewData(leaveStatus: string) { 
      console.log("с даты",leaveStatus,this.fromDate_YYYY_MM_DD,"по дату",this.toDate_YYYY_MM_DD);
    }

Это мой TS файл

 


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { ChartboardFRComponent } from './chartboard-fr.component';
import { ViewstatusFrComponent } from './viewstatus-fr/viewstatus-fr.component';


const routes: Routes = [
  { path: "", component: ChartboardFRComponent },
  { path: "dstatus-fr", component: ViewstatusFrComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class ChartboardFRRoutingModule { }

А в конце это мой файл маршрутизации с соответствующими деталями маршрутизации
нам нужно перенаправиться к ViewstatusFrComponent по клику на setviewdata

вставьте описание ссылки здесь

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
  ссылка на компонент пользователя
</a>

Я столкнулся с подобной проблемой однажды, используя как маршрутизатор, так и функцию, вызываемую по клику. Вместо этого я попытался перейти к указанному маршруту, используя функцию, вызванную по клику, подобно этому:

<div class="col py-3 leave_card_inner" *ngFor="let status of leaveStatus | keyvalue; index as index">
  <a (click)="setViewData(status.key)">
    <h3>{{ status.key | lowercase | translate | titlecase}}</h3>
    <p class="mt-3 mb-0 card_text" [ngClass]="getStatuskColor(status.key)">
      {{status.value}}
    </p>
  </a>
</div>

  setViewData(leaveStatus: string) { 
  console.log("с даты", leaveStatus, this.fromDate_YYYY_MM_DD, "по дату", this.toDate_YYYY_MM_DD);
  this.router.navigate(['dstatus-fr']);
}

Вы используете routerLink и также вызываете событие клика с (click), они могут конфликтовать.
Лучше обработать навигацию маршрутов внутри функции setViewData(leaveStatus: string).

    <div class="mr-3 ml-3 mt-0 mb-4 leave_card_outer" *ngIf="leaveStatus != null">
  <div class="row bg-white p-2">
    <div class="col py-3 leave_card_inner" *ngFor="let status of leaveStatus | keyvalue; index as index">
      <a class="" (click)="setViewData(status.key)">
        <h3>{{ status.key | lowercase | translate | titlecase }}</h3>
        <p class="mt-3 mb-0 card_text" [ngClass]="getStatuskColor(status.key)">
          {{ status.value }}
        </p>
      </a>
    </div>
  </div>

ваша функция setviewData может выглядеть так.

setViewData(leaveStatus: string) {
    console.log("с даты", leaveStatus, this.fromDate_YYYY_MM_DD, "по дату", this.toDate_YYYY_MM_DD);
    
    // Перейдите к маршруту 'dstatus-fr' и передайте 'leaveStatus', если это необходимо
    this.router.navigate(['dstatus-fr'], {
      queryParams: { status: leaveStatus }
    });
  }

в конце не забудьте внедрить Router в конструктор

 constructor(private router: Router) {}