Применение фонового класса к родительскому div в angular 6

Question

Я строю гармошку с начальной загрузкой 4, используя карты. На каждой карточке у меня есть несколько значков, таких как редактирование, просмотр, детализация и т. Д. При нажатии на эти значки вызывается функция в компоненте, которая затем направляет пользователя к дочернему маршруту.

Розетка дочернего роутера отображается справа от этого аккордеона.

Я хочу изменить фон заголовка карты при нажатии на любой значок под этой картой. Как я могу это сделать?

Вот HTML

  <div id="accordion" role="tablist" aria-multiselectable="true">

    <!--Kitchen-->
    <div class="card mwk-project-left" *ngFor="let psl of projectSubList; let i = index">
          <div class="card-header mwk-project-details-hdr" role="tab" id="heading{{psl.Id}}">
        <h5 class="mb-0">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{psl.Id}}" aria-expanded="true" [attr.aria-controls]="'collapse'+psl.Id">
            {{psl.Description}}
          </a>
        </h5>
      </div>

      <div id="collapse{{psl.Id}}" class="collapse show" role="tabpanel" [attr.aria-labelledby]="'heading'+psl.Id">
        <div class="card-body">

          <ul *ngIf="psl.Features">
            <li *ngFor="let ftr of psl.Features; let fi = index">
              {{ftr.FeatureGroup}}: {{ftr.Description}}
            </li>
          </ul>

          <h4 class="text-danger" *ngIf="!psl.Features">No features found!</h4>

          <div class="mwk-actions-sub">
            <button mat-icon-button color="accent" type="button" (click)="onView(psl.Id)" title="View {{psl.Description}}" class="matIconButton"><mat-icon>ballot</mat-icon></button>
            <button mat-icon-button color="primary" type="button" (click)="onDetail(psl.Id)" title="Detail {{psl.Description}}" class="matIconButton"><mat-icon>view_list</mat-icon></button>
            <button mat-icon-button color="primary" type="button" (click)="onEdit(psl.Id)" title="Edit {{psl.Description}}" class="matIconButton"><mat-icon>edit</mat-icon></button>
            <button mat-icon-button color="primary" type="button" (click)="onConfig(psl.Id)" title="Config {{psl.Description}}" class="matIconButton"><mat-icon>settings_applications</mat-icon></button>
            <button mat-icon-button color="warn" type="button" (click)="onDelete(psl.Id, psl.Description)" title="Delete {{psl.Description}}" class="matIconButton"><mat-icon>clear</mat-icon></button>
          </div>
        </div>
      </div>
     </div>    
  </div>

Как я могу это сделать?

Посмотрел пример div с этой страницы, но у меня нет тегов a.

https://angular.io/api/router/RouterLinkActive

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>

Обновление 1

Я сделал следующие два изменения, и теперь мой фон применяется к разделу заголовка карты.

<div class="card mwk-project-left" *ngFor="let psl of projectSubList; let i = index" routerLinkActive="mwk-project-left-active" [routerLinkActiveOptions]="{exact: true}">

а потом

<a mat-icon-button color="accent" [routerLink]="[psl.Id]" title="View {{psl.Description}}" class="matIconButton"><mat-icon>ballot</mat-icon></a>
            <a mat-icon-button color="primary" [routerLink]="[psl.Id, 'detail-list']" title="Detail {{psl.Description}}" class="matIconButton"><mat-icon>view_list</mat-icon></a>
            <a mat-icon-button color="primary" [routerLink]="[psl.Id, 'edit']" title="Edit {{psl.Description}}" class="matIconButton"><mat-icon>edit</mat-icon></a>
            <a mat-icon-button color="primary" [routerLink]="[psl.Id, 'config-edit']" title="Config {{psl.Description}}" class="matIconButton"><mat-icon>settings_applications</mat-icon></a>
            <a mat-icon-button color="warn" [routerLink]="[psl.Id, 'edit']" [queryParams]="{delete: 'yes'}" title="Delete {{psl.Description}}" class="matIconButton"><mat-icon>clear</mat-icon></a>

Вышеуказанное обновление 1 помогло при нажатии за пределами раздела розетки маршрутизатора.

Когда я щелкаю ссылку, чтобы перейти на другую дочернюю страницу из внутренней розетки маршрутизатора, мой класс обновления 1 удаляется в это время. Так что я потерял фон МТ. Как это исправить сейчас?

Обновление 2

точный: false исправил это при переходе на другую дочернюю страницу изнутри розетки маршрутизатора.

<div class="card mwk-project-left" *ngFor="let psl of projectSubList; let i = index" routerLinkActive="mwk-project-left-active" [routerLinkActiveOptions]="{exact: false}">

Я в порядке, спасибо за внимание!

Answer 1

Помог этот пост https://angular.io/api/router/RouterLinkActive

Затем применил routerLinkActive на карту Div с exact false поскольку на одной из дочерних страниц есть ссылки, которые ведут пользователя на некоторые другие страницы.

<div class="card mwk-project-left" *ngFor="let psl of projectSubList; 
let i = index" routerLinkActive="mwk-project-left-active" 
[routerLinkActiveOptions]="{exact: false}">

и, наконец, мне пришлось поменять кнопки для привязки тегов

от

<button mat-icon-button color="accent" type="button" (click)="onView(psl.Id)" 
title="View {{psl.Description}}" class="matIconButton"><mat-icon>ballot</mat-icon></button>

в

<a mat-icon-button color="accent" [routerLink]="[psl.Id]" title="View {{psl.Description}}" 
class="matIconButton"><mat-icon>ballot</mat-icon></a>