Angular-Mat-Table: Sor lenyitása gombra Directive helyett

Angular-Mat-Table: Sor lenyitása gombra Directive helyett
2019-01-22T15:00:45+01:00
2019-01-23T09:12:11+01:00
2022-10-15T21:41:15+02:00
VaMa
Üdv!

Van egy kész directive-em, ami adott sorra kattintva nyitja le a sort, és megjelenít egy tartalmat benne.
A probléma, hogy nem sorra klikkelve szeretném ezt az event-et elsütni, hanem az adott sor gyerek gombjára klikkelve.

A kérdés tehát:

Hogyan lehet megváltoztatni a kódot, hogy csak gombnyomásra történjen változás?
Kódom:
cdk-detail-row.directive.ts:

import { Directive, EventEmitter, HostBinding, HostListener, Input, Output, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[cdkDetailRow]' }) export class CdkDetailRowDirective { private row: any; private tRef: TemplateRef<any>; private opened: boolean; @HostBinding('class.expanded') get expanded(): boolean { return this.opened; } @Input() set cdkDetailRow(value: any) { if (value !== this.row) { this.row = value; // this.render(); } } @Input('cdkDetailRowTpl') set template(value: TemplateRef<any>) { if (value !== this.tRef) { this.tRef = value; } } @Output() toggleChange = new EventEmitter<CdkDetailRowDirective>(); constructor(public vcRef: ViewContainerRef) { } @HostListener('click') onClick(event): void { this.toggle(); } toggle(): void { if (this.opened) { this.vcRef.clear(); } else { this.render(); } this.opened = this.vcRef.length > 0; this.toggleChange.emit(this); } private render(): void { this.vcRef.clear(); if (this.tRef && this.row) { this.vcRef.createEmbeddedView(this.tRef, { $implicit: this.row }); } } }
browse-form.component.ts:
ExpandCollapseRow(row: CdkDetailRowDirective, event: any, refRow: ElementRef) { ... //Mit írjak ide? }


browse-form.component.html:
Ez a sorra vonatkozó rész:

<mat-row *matRowDef="let row; columns: displayMemberColumns;" matRipple class="element-row" (contextmenu)="onContext($event, row)" (click)="outContext()" (mousemove)="displayMenu($event)" [cdkDetailRow]="row" [cdkDetailRowTpl]="tpl"></mat-row>
Ez pedig button oszlop:
<ng-container *ngFor="let column of displayMemberColumns; let i=index" matColumnDef="{{column}}"> <div *ngIf="i===0"> <mat-header-cell *matHeaderCellDef></mat-header-cell> <mat-cell *matCellDef="let row; let i = index" [hidden]="!row.HAS_FOREIGN_ROWS"> <button #expandButton [ngClass]="{expandButton:true}" mat-button *ngIf="column==='ACTIONS'" (click)="ExpandCollapseRow(row, $event, refRow)">&gt;</button> </mat-cell> <mat-footer-cell *matFooterCellDef></mat-footer-cell> </div> </ng-container>

Ez pedig a megjelenítendő test template:

<ng-template #tpl let-element> <div class="mat-row" [@detailExpand] style="overflow: hidden"> <h1>Hello!</h1> </div> </ng-template>


Előre is köszönöm a segítséget!
V.M.
Mutasd a teljes hozzászólást!
Sikerült megoldanom közben, nem tudom, hogy fapadosra, de működik, aludnom kellett rá egyet:
A Directive-ben az opened változót publikusra állítottam:

public opened: boolean;

Majd a Directive-ből kitöröltem ezt a részt:

@HostListener('click') onClick(event): void { this.toggle(); }
Felvettem a Component-ben egy új ViewChild-ot, amibe a directive-et kötöttem be:

@ViewChild(CdkDetailRowDirective) row = null;
Majd Component-ben az ExpandCollapseRow-ban meghívtam a directive toggle függvényét:

ExpandCollapseRow(event: any, refRow: ElementRef) { this.expandButtons.forEach(obj => { obj._elementRef.nativeElement.innerHTML = '&gt;'; }); this.row.toggle(); if (this.row.opened) { event.target.innerHTML = '&or;'; } else { event.target.innerHTML = '&gt;'; } }
És így már csak a gombra kattintáskor nyílik le az aktuális sor.
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd