如何在角度 7 中的另一个组件中进行更改时更新一个组件中的数据

Question

我总共有 3 个组件，即 filterComponent、tableViewComponent 和 Homecomponet。 filterComponent - 包含过滤器选项，用于过滤 tableViewComponent.filter 选项中的数据，如日期范围等。 tableViewComponent - 显示数据的表格格式。 homecomponent- 是基础组件，其中显示了其他 2 个组件。

我想要的是当我在 filterComponent 中更改日期范围时（我在这里调用 api 并在这里获取数据）它必须更新 tablecomponent 中的数据（我在这里也有分页）。但这里有 2 个不同的组件，我不知道如何实现。在此之前，我在主组件中包含了所有数据范围（如过滤器）选项和表格视图。现在我分成两个组件。我正在使用角度材料

//表格组件

<div class="mat-elevation-z8  responsive-table">

      <table mat-table [dataSource]="dataSource" matSort>
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef> ID </th>
          <td mat-cell *matCellDef="let element"> {{element.NODE_ID}} </td>
        </ng-container>
        <ng-container matColumnDef="CMTS Name">
            <th mat-header-cell *matHeaderCellDef> CMTS Name </th>
            <td mat-cell *matCellDef="let element">{{element.CMTS_NAME}} </td>
        </ng-container>

        <ng-container matColumnDef="Status">
            <th mat-header-cell *matHeaderCellDef> Status </th>
            <td mat-cell *matCellDef="let element"> {{element.STATUS}} </td>
        </ng-container>
        <ng-container matColumnDef="Homes On Node">
            <th mat-header-cell *matHeaderCellDef>Homes On Node </th>
            <td mat-cell *matCellDef="let element"> {{element.TOTAL_ADDR_CNT}} </td>
        </ng-container>
        <mat-paginator [length]="totalPages" [pageSize]="pageSize" [pageIndex]="pageIndex" [pageSizeOptions]="[10]"
    (page)="nextPage($event)">
        </mat-paginator>
    </table>
</div>

//过滤组件

<div class="row" id="filter-panel">
    <form [formGroup]="angForm" (ngSubmit)="onSubmit()">
        <div class="col-1">
            <mat-form-field class="range-datepicker">
            <input [(value)]="date" matInput placeholder="Choose a date" [satDatepicker]="picker" formControlName="date"
        (dateInput)="onDatePickerValueChange()">
            <sat-datepicker #picker [rangeMode]="true">
            </sat-datepicker>
            <sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle>
            </mat-form-field>
        </div>
        <button mat-flat-button color="primary" class="search-btn">Search</button>


    </form>
</div>

//filtercomponent.ts

onSubmit() {
    this.spinner.show();

    this.pageIndex = 0;
    this.ApiServiceObj.getMarkerDataForTableView(this.startdate, this.enddate, this.regionOption, this.pageIndex, 10).subscribe((res) =>         {
     this.generateMapRespose(res['results']);

     this.totalPages = res['totalPages'];

     this.spinner.hide();

    });
  }

//家庭组件

  <div>
      <app-filter> </app-filter>
     <app-table></app-table>
  </div>

Answer 1

最好的方法（在我看来）是使用输入和输出。因此，我会向您的过滤器组件添加一个事件，以便在过滤器更改时发出一个事件。 例如

export class FilterComponent {
    @Output() filterChanged = new EventEmitter();
    ...
    onSubmit() {
        this.spinner.show();

        this.pageIndex = 0;
        this.ApiServiceObj.getMarkerDataForTableView(this.startdate, this.enddate, this.regionOption, this.pageIndex, 10)
            .subscribe((res) => {
                this.generateMapRespose(res['results']);

                this.totalPages = res['totalPages'];

                // TO NOTE that you need to emit the data to the parent component
                this.filterChanged.emit(res);

                this.spinner.hide();
            });
    }
}

从您在上面发布的代码看起来，您正在获取过滤器组件中的数据，我个人宁愿将过滤器选项发送到父组件，以便您的 HomeComponent 决定从哪里获取数据.此外，您需要向表格组件添加一个 Input 属性。您可以这样做，类似于：

export class TableComponent {
  @Input() data: any;
}

使用这种方法，您可以非常清晰地分离关注点，并且还可以非常清晰地数据流。您的过滤器组件负责收集过滤器信息，您的 homeComponent 使用这些信息正确收集数据并将其传递给负责正确呈现的 tableComponent。

从我的角度来看，这是处理这个问题的最直接的方法。有几种不同的机制如何处理这种情况。你可以在这里详细阅读：https://angular.io/guide/component-interaction

另一种方法是使用带有主题模式的服务。 您定义一个具有数据属性的服务。您的 FilterComponent 将在该主题上发出值，而您的 Table 组件将订阅该主题。 这样的主题可能如下所示：

export class DataService {
  private dataSub = new Subject();

  getData$(){
    return this.dataSub.asObservable();
  }

  setData(data:any) {
    this.dataSub.next(data);
  }
}

我个人认为您不需要在额外需要的主题上进行往返。它还介绍了 RxJS 的复杂性，您现在可能想跳过它。

总而言之，我会通过输入和输出来处理数据流。希望对您有所帮助！