feat/bug(aria/accordion): 自定义触发点击

@Component({ selector: '[myTrigger]', hostDirectives: [ { directive: AccordionTrigger, inputs: ['panel', 'disabled', 'expanded'], outputs: ['expandedChange'], }, ], // uncomment to make it working // host: { ngAccordionTrigger: '' }, template: <ng-content />, styles: :host { font-size: 16px; } , }) export class MyTrigger {}

@Component({ selector: 'CustomAccordion', imports: [ NgTemplateOutlet, AccordionGroup, AccordionTrigger, AccordionPanel, AccordionContent, ], template: <div ngAccordionGroup [multiExpandable]="false"> @if (trigger()) { <ng-container [ngTemplateOutlet]="trigger()" [ngTemplateOutletContext]="{ panel: panel, expanded: expanded(), expandedChange: () => expanded.update(v=> !v), disabled: disabled(), }" [ngTemplateOutletInjector]="'outlet'" /> } @else { <button ngAccordionTrigger [panel]="panel" [(expanded)]="expanded"> Click works! ✅ <span>Text inside span: working ✅</span> </button> } <div ngAccordionPanel #panel="ngAccordionPanel"> <ng-template ngAccordionContent> Content </ng-template> </div> </div> , }) export class CustomAccordion { readonly disabled = model(false); readonly expanded = model(false); readonly trigger = input<TemplateRef | undefined>(undefined); }

@Component({ selector: 'Consumer', imports: [MyTrigger, CustomAccordion], template: `

<ng-template
  #customTrigger
  let-panel="panel"
  let-disabled="disabled"
  let-expanded="expanded"
  let-expandedChange="expandedChange">

  <button
    myTrigger
    class="trigger"
    [panel]="panel"
    [disabled]="disabled"
    [expanded]="expanded"

…