Проблема з відображенням класів при підписці на активні параметри маршруту

3 Березня 2024 в 13:17 104

Усім привіт! У мене виникла проблема з реалізацією бічної панелі, в якій користувач буде мати можливість вибирати зі списку різні елементи та завантажувати різні результати. Для досягнення цього я використовую параметри маршрутизації, що по суті передають ідентифікатор на бекенд для отримання нових результатів.

<div class="organisation-item" *ngFor="let item of emailDocumentData" (click)="navigateToEmailDocument(item.pk)" [ngClass]="{'selected-item': item.pk === emailContentIDTest}">
    <span [class.show]="!isCollapsed" class="text-hide item-text">{{ item.name }}</span>
    <span [class.show]="isCollapsed" class="text-hide plus sliced-text">{{ item.name | slice: 0 : 4 }}</span>
</div>

<span [class.show]="isCollapsed" class="text-hide plus sliced-text">{{ item.name | slice: 0 : 4 }}</span>

</div>

Мені потрібно, щоб при параметрі маршрутизації emailContentID співпадав з item.pk, клас ‘selected-item’ додавався як CSS клас.

Ось моя функція навігації:

navigateToEmailDocument(pk: number): void {
    this.router.navigate([pk], { relativeTo: this.activatedRoute });
}

navigateToEmailDocument(pk: number): void {

this.router.navigate([pk], { relativeTo: this.activatedRoute });

}

І ось ngOnInit:

ngOnInit(): void {
    // Підсвітка параметрів обраного елемента ще не працює
    this.activatedRoute.params.subscribe((params) => {
        this.emailContentID = params["id"];
    });
}