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

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>

表事件.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>

---

如果您打算拥有多个此类案例，您还可以使用 go 来获得以下解决方案。 你仍然需要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 链接中的工作演示

在这里，您可以使用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();
  }
}

指令.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);
      }
}

表服务.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$;
  }
}