javascript - 在派生类上订阅Angular2事件

我正在开发一个在不同页面上利用多个网格的应用程序。我没有一次又一次地重写HTML，而是通过以下方式提取了代码：

table.component.ts

export class TableComponent implements OnInit{
  columns: Column[]= [];
  rows: any[] = [];
  searchText: string;
  routerLinked: string;
  showFilter: boolean;

  constructor(private paginService: PaginationService,
              private tableLoader: GridLoadUtil,
              private progressBarService: ProgressBarService,
              private route: ActivatedRoute,
              private router: Router) {
    this.paginService.itemsToDisplayChange.subscribe((value) => {
      this.rows = value
    });

    this.tableLoader.columnsChange.subscribe((values) => {
      this.columns = values;
    });
  }

  ngOnInit() {
    this.tableLoader.beforeDataLoaded();
    this.progressBarService.startProgress();
    this.routerLinked = this.route.snapshot.url[0].path + '/';
    this.showFilter = true;
  }

  navigateToCreate() {
    this.router.navigate([this.routerLinked]);
  }

  applyFilter() {
    this.paginService.applyFilter(this.searchText);
  }

  clearFilter() {
    this.searchText = '';
    this.paginService.clearFilter();
  }
}

table.component.html

<div class="container container-fluid">
  <div class="row" *ngIf="showFilter === true">
    <div class="form-group">
      <label>Filter </label>
      <input type="text" id="inputName" [(ngModel)]="searchText"/>
      <button type="button" class="btn btn-default btn-sm" (click)="applyFilter()">
        <span class="glyphicon glyphicon-ok"></span>
      </button>
      <button type="button" class="btn btn-default btn-sm" (click)="clearFilter()">
        <span class="glyphicon glyphicon-remove"></span>
      </button>
      <a class="btn btn-default btn-sm pull-right" (click)="navigateToCreate()">
        <span class="glyphicon glyphicon-plus-sign"></span>
      </a>
    </div>
  </div>
  <div class="row">
    <table class="table table-responsive table-hover">
      <thead class="thead-inverse">
      <tr>
        <th *ngFor="let column of columns">{{column.header}}</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let row of rows;trackBy: trackByID;">
        <td *ngFor="let column of columns">{{row[column.field]}}
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <xfd-progressbar component></xfd-progressbar>
  <div class="row col-lg-offset-5">
    <ngbd-pagination-basic> component</ngbd-pagination-basic>
  </div>
</div>

我的表组件将各种服务作为依赖项，例如用于分页实现的paginService，progressBar，路由器等。它还利用GridLoadUtil，它提供有关网格将具有的列的信息，并将数据传递给它。

GridLoadUtil

@Injectable()
export class GridLoadUtil {
  columns: Column[] = [];
  columnsChange: Subject<Column[]> = new Subject<Column[]>();

  constructor(protected paginService: PaginationService) {
  }

  setColumns(columnList: Column[]): void {
    this.columns = columnList;
    this.columnsChange.next(this.columns);
  }

  beforeDataLoaded(): void {
    this.paginService.setPaginationDisabled(true);
    this.paginService.setTotalItems([]);
  }

  afterDataLoaded(data): void {
    this.paginService.setTotalItems(data);
    this.paginService.setPaginationDisabled((data.length == 0));
    this.paginService.setActivePage(1);
  }
}

如果我在同一页面上有多个网格，则使用指令提供GridLoadUtil的新实现，以使所有网格都不会因为一次更改而受到影响。

@Directive({
  selector: '[dummy]',
  providers: [{provide: GridLoadUtil, useClass: DummyGridLoadUtil}]
})
export class DummyDirective {
  constructor(private el: ElementRef) {
    console.error("not")
  }
}

如果页面具有多个网格，这就是我的页面的样子-

 <xfd-table></xfd-table>

 <xfd-table [dummy]></xfd-table>

我设法使两个表的行为都不同。但是，对第二个网格的列所做的更改未得到预订，因此不会出现在页面上。即使table.component.ts获得注入的DummyGridLoadUtil实例，

this.tableLoader.columnsChange.subscribe((values) => {
      this.columns = values;
});

上面的部分赞成对变量类型（GridLoadUtil）的更改，而不是对实现（DummyGridLoadUtil）的更改。

任何想法如何克服这个？

最佳答案

因此，如果您希望每页多个表，则存在严重的设计缺陷。

现在看来：

页面具有加载数据的服务并提供网格加载实用程序

表组件获取注入的网格负载util，然后页面包装器调用方法来设置列

您正在尝试使用虚拟指令重新提供gridloadutil，但是页面包装器当然无法调用in的方法，因为它在注入器树中较低。

您要做的是在不希望进行重组的情况下，当您要在一个页面上有多个表时，为每个表创建包装器。

因此提供网格加载工具并具有填充它所需的任何服务的TableOneWrapperComponent，以及提供网格加载工具的自身副本并具有提供它所需的任何服务的TableTwoWrapperComponent。

否则，您可以考虑进行较小的重组，以便将列作为输入而不是通过服务来提供，因为这看起来像是直接的父/子关系。但是，每个组件都获得给定服务的一个副本，因此您不能让父级通过同一服务独立地与两个子级进行通信。