Question

我的要求是这样的，我有一个可重复使用的表，想在多个地方使用。我在使用此表的任何地方传递表数据和列。

现在在某些父组件中，我想在用户单击表行或双击表行时获取数据。

为此，我使用@HostListener创建了一个指令。

当我在表行上使用指令时，我可以在指令中获取被点击的行数据，但是当我发出该数据时，却不在父级中获取它。

table.component.html

<section class="example-section">

  <div class="cdx-table-wrapper cdx-table-wrapper-fixed">
    <table mat-table [dataSource]="tableData" class="mat-elevation-z8">
      <!--- Note that these columns can be defined in any order.
            The actual rendered columns are set as a property on the row definition" -->

      <ng-container *ngFor="let disCol of tableColumns; let colIndex = index" matColumnDef="{{disCol}}">
        <th mat-header-cell *matHeaderCellDef>{{disCol}}</th>
        <td mat-cell *matCellDef="let element">{{element[disCol]}}</td>
      </ng-container>

      <tr class="persues-table-row" mat-header-row *matHeaderRowDef="tableColumns"></tr>
      <tr class="persues-table-row" mat-row *matRowDef="let row; columns: tableColumns;" appTableEvent [rowData]="row"></tr>
    </table>
  </div>
</section>

table-events.directive.ts

import { Directive, HostListener, Input, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[appTableEvent]'
})
export class TableEventDirective {
  @Input() rowData;

  @Output()
  clickHandler: EventEmitter<any> = new EventEmitter();

  constructor() { }

  @HostListener('click', ['$event'])
  onClickHandler(event: MouseEvent) {
    this.clickHandler.emit(this);
  }
}

父组件

<app-table
  [tableData]="dataSourceBase"
  [tableColumns]="displayedColumnsBase"
  (clickHandler)="onRowClick($event)">
</app-table>

父项ts

onRowClick(event) {
  console.log('onRowClick', event)
}

我没有通过onRowClick()方法获取数据。

在某些情况下，我只想使用表来显示数据，在那种情况下，我不想应用指令。

预先感谢

Answer 1

您还需要在表格组件上创建一个HostListener：

@Component({
  selector: 'app-table'
})
export class TableComponent {
  @Output()
  clickHandler: EventEmitter<MouseEvent> = new EventEmitter();
}

并从您的appTableEvent指令发出此信息：

<tr class="persues-table-row" mat-row
    *matRowDef="let row; columns: tableColumns;" [rowData]="row"
    appTableEvent (clickHandler)="clickHandler.emit($event)">
</tr>

如果您计划有多种此类情况，也可以寻求以下解决方案。像我之前显示的那样，您仍然需要clickHandler上的TableComponent，但是您可以像这样更新指令：

@Directive({
  selector: '[appTableEvent]'
})
export class TableEventDirective {
  @Input() rowData;

  constructor(@Host() private table: TableComponent) { }

  @HostListener('click', ['$event'])
  onClickHandler(event: MouseEvent) {
    this.table.clickHandler.emit(this);
  }
}

这样，您无需将点击处理程序添加到<tr>元素

Answer 2

在此StackBlitz Link

中的

工作演示

此处，您可以使用service和rxjs - Behaviorsubject。为此，您必须创建一个服务，然后在此服务中定义您的Behaviorsubject和所有常见的与通信相关的内容。您必须在组件和指令中注入这一服务。这样一来，不必@Output()进行多个级别的操作，而无需考虑其中的一个好处，则可以与事件的任何父级进行通信，而不必考虑事件的链接。

table.component.html

<table class="table table-dark table-striped table-hover">
   <thead>
     <tr>
       <th scope="col">ID</th>
       <th scope="col">Company Name</th>
       <th scope="col">Brand</th>
       <th scope="col">Engine Type</th>
     </tr>
   </thead>
   <tbody>
      <tr *ngFor="let row of tableService.tableData; let i = index" appTableRow [rowData]="row">
        <th scope="row">{{row.id}}</th>
        <td>{{row.companyName}}</td>
        <td>{{row.brand}}</td>
        <td>{{row.engineType}}</td>
      </tr>
   </tbody>
</table>

<div *ngIf="selectedRow | async as rowSelect" class="alert alert-primary">
  <pre>
    {{rowSelect | json}}
  </pre>
</div>

table.component.ts

export class TableComponent implements OnInit {
  selectedRow;
  constructor(private tableService: TableDataService) { }

  ngOnInit() {
    this.selectedRow = this.tableService.getTableRow();
  }
}

directive.ts

@Directive({
  selector: '[appTableRow]'
}) 
export class TableRowDirective {
   @Input() rowData;

   constructor(private tableRowSerivce: TableDataService) { }

   @HostListener('click', ['$event'])
      onClickHandler(event: MouseEvent) {
         this.tableRowSerivce.tableRowData.next(this.rowData);
      }
}

table-service.ts

@Injectable()  
export class TableDataService {

  tableData = [{
   id: 1,
   companyName: 'Audi',
   brand: 'A4',
   engineType: 'Diesel'
  },{
   id: 2,
   companyName: 'Rolls-Roys',
   brand: 'R4',
   engineType: 'Diesel'
  },{
   id: 3,
   companyName: 'Hyundai',
   brand: 'Kona',
   engineType: 'Electric'
  },{
   id: 4,
   companyName: 'Ford',
   brand: 'Endevour',
   engineType: 'Diesel'
 }];

  tableRowData : BehaviorSubject<any> = new BehaviorSubject<any>({});
  tableRowData$ = this.tableRowData.asObservable();

  constructor() { }

  getTableRow(): Observable<any>{
    return this.tableRowData$;
  }
}

Angular如何将数据从指令传递到父组件

2 个答案: