Question

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

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

// tableComponent

<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>

// filtercomponent

<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();

    });
  }

// homecomponent

  <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的复杂性，您可能现在想跳过它。

总而言之，我会通过输入和输出进行数据流。希望有帮助！

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

1 个答案: