Angular 4整行可点击及复选框选中行变色方案咨询

Got it, let's tackle your two Angular 4 requirements one by one. Here's how to implement both features with your existing code:

1. Fix the Panel ID Mismatch (Critical for Both Features) #

First, I noticed your ngb-panel has an id with an extra dot and space: id=". {{testPanel.Id}}". This will break our selection checks later, so let's fix that first:

<!-- Parent component HTML -->
<ngb-panel [disabled]="true" *ngFor="let testPanel of otherTests" id="{{testPanel.Id}}" [title]="testPanel.Name">

2. Make the Entire Row Clickable #

We'll add a click handler to the accordion's card header, then prevent propagation for inner elements that shouldn't trigger the toggle (like the checkbox or favorite icon):

Update the app-custom-accordion Template

Add the click event to the card-header div:

<!-- app-custom-accordion component template -->
<div role="tab" id="{{panel.id}}-header" 
     [class]="'card-header ' + (panel.type ? 'card-' + panel.type: type ? 'card-' + type : '')" 
     [class.active]="isOpen(panel.id)"
     (click)="!panel.disabled && toggle(panel.id)"> <!-- Add this click handler -->

Prevent Propagation for Inner Elements

In your parent component's ngbPanelTitle template, add $event.stopPropagation() to elements that should not trigger the row toggle:

<!-- Parent component HTML inside ngbPanelTitle -->
<div class="action-items">
  <!-- Stop propagation on favorite click -->
  <span class="material-icons fav" [class.favorited]="testPanel.Favorite" (click)="onFavoriteClick(testPanel); $event.stopPropagation()"></span>
  
  <span class="icon-set" [ngClass]="{'same-day-2x': isSameDay(testPanel.Code), 'next-day-2x': isNextDay(testPanel.Code)}"></span>
  
  <!-- Stop propagation on checkbox label click -->
  <label class="custom-control custom-checkbox" (click)="$event.stopPropagation()">
    <input type="checkbox" class="custom-control-input" [name]="testPanel.Id + '-' + testPanel.Moniker" [ngModel]="panelIds.indexOf(testPanel.Id) > -1" (ngModelChange)="onPanelCheckboxUpdate($event, testPanel)" [id]="testPanel.Id + '-' + testPanel.Moniker">
    <span class="custom-control-indicator"></span>
  </label>
</div>

Fix the Arrow Expand Toggle

To avoid double-toggling when clicking the expand arrow, add propagation stop there too:

<!-- app-custom-accordion component template -->
<div *ngIf="arrowExpand" (click)="toggle(panel.id); $event.stopPropagation()" [attr.aria-expanded]="isOpen(panel.id)">
  <span class="material-icons expand"></span>
</div>

3. Toggle Row Background on Checkbox Selection #

We'll pass the selected panel IDs to the accordion component and use ngClass to apply a dark background when selected:

Add Input to app-custom-accordion Component

In the TS file for app-custom-accordion, add an input to receive selected panel IDs:

// app-custom-accordion.component.ts
import { Input } from '@angular/core';

// ... existing code ...

@Input() selectedPanelIds: number[] = [];

Pass Selected IDs from Parent Component

Update the parent's app-custom-accordion tag to pass the panelIds array:

<!-- Parent component HTML -->
<app-custom-accordion [closeOthers]="true" [selectedPanelIds]="panelIds">

Apply Dynamic Class to Card Header

Add ngClass to the card-header in app-custom-accordion to toggle the background:

<!-- app-custom-accordion component template -->
<div role="tab" id="{{panel.id}}-header" 
     [class]="'card-header ' + (panel.type ? 'card-' + panel.type: type ? 'card-' + type : '')" 
     [class.active]="isOpen(panel.id)"
     [ngClass]="{'selected-row': selectedPanelIds.includes(Number(panel.id))}" <!-- Add this dynamic class -->
     (click)="!panel.disabled && toggle(panel.id)">

(Note: Use Number(panel.id) if testPanel.Id is a number, since panel.id is a string from the template.)

Add CSS for Selected Row

Add this to your component's CSS (or global styles) to style the selected row:

.selected-row {
  background-color: #2d3748; /* Adjust to your preferred dark color */
  color: white; /* Ensure text is readable against dark background */
}

How It Works #

• When you click anywhere on the row (except the checkbox/favorite icon), the accordion will toggle open/closed.
• When you check the checkbox, panelIds is updated, which triggers the selected-row class to be applied to the corresponding row, changing its background. Unchecking removes the class, restoring the white background.

Hope this solves both your issues smoothly!

内容的提问来源于stack exchange，提问作者user10796734