auseft.platform.datav/src/app/routes/data-v/card/card.component.ts

// parent.component.ts
import { CommonModule } from '@angular/common';
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { SHARED_IMPORTS } from '@shared';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
@Component({
  selector: 'data-v-card',
  standalone: true,
  template: `
    <div class="card-content">
      <!-- <img src="assets/dashboard/dashboard_card_bg.jpg" style="width: 100%;" /> -->

      <div class="card-content-title">
        <div class="card-content-l">{{ title }}</div>
        <div *ngIf="showSetting" class="card-content-r">         
          <a nz-dropdown [nzDropdownMenu]="menu" nz-icon nzType="setting" nzTrigger="click" nzTheme="outline"></a>
          <nz-dropdown-menu #menu="nzDropdownMenu">
            <ul nz-menu nzSelectable>
              <li nz-menu-item *ngFor="let option of optionsList">
                <label nz-checkbox [(ngModel)]="option.checked" (ngModelChange)="onCheckChange()">{{option.label}}</label>
              </li>
            </ul>
          </nz-dropdown-menu> 
        </div>    
       
      </div>

      <ng-content></ng-content>
    </div>
  `,
  styleUrls: ['./card.component.less'],
  imports: [NzIconModule, CommonModule, NzDropDownModule, ...SHARED_IMPORTS],
})
export class DataVCardComponent {
  @Input() showSetting = false;
  @Input()
  optionsList: { label: string; checked: boolean; }[] = [];
  // 定义输出事件
  @Output() onCheckedItemsChange = new EventEmitter<{ label: string, checked: boolean }[]>();
  @Input() title: string = '';
  getCheckedItems() {
    return this.optionsList.filter(option => option.checked);
  }

  onCheckChange() {
    const checkedItems = this.getCheckedItems();
    this.onCheckedItemsChange.emit(checkedItems);
  }
}