javascript - 多次出现相同的自定义指令Angular2

标签 javascript angular angular2-services angular2-directives

我目前正在构建一个 Angular 应用程序,我试图在指令(作为组件)的帮助下使代码高度可重用。

<div class="container container-fluid" >
  <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></xfd-progressbar>
  <div class="row col-lg-offset-5">
    <ngbd-pagination-basic></ngbd-pagination-basic>
  </div>
</div>

上面是我创建的一个指令,它有一个可重用的表。我的一般要求是每页有一个表格。

这是相同的相应组件 -

import {Column} from "../models/Column";
import {Component, OnInit} from "@angular/core";
import {PaginationService} from "../services/PaginationService";
import {GridLoadUtil} from "../util/GridLoadUtil";
import {ProgressBarService} from "../services/ProgressBarService";

/**
 * Created by ppandey on 6/12/2017.
 */

@Component({
    selector: 'xfd-table',
    templateUrl: './table.component.html',
    styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit{
  columns: Column[]= [];
  rows: any[] = [];

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

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

  ngOnInit() {
    this.tableLoader.beforeDataLoaded();
    this.progressBarService.startProgress();
  }
}

如您所见,我的组件使用 Services(GridLoadUtil) 为其提供数据,这使得代码高度解耦。

这是我陷入困境的地方。如果我想在一个页面上有多个表,具有不同的数据和结构,它不能作为每个组件绑定(bind)到的服务是 Singleton。

我可以选择不注入(inject)服务,并将每个服务作为 setter 提供,但在那种情况下,我需要为每个服务创建子类,目前我不需要这样做。此外,我的代码将变得耦合。

你们认为我可以采取什么方向来解决这个问题?

谢谢, 实践

最佳答案

您可以创建指令以在那里提供服务。 Angulars DI 会在查找 TableLoader 服务时找到该提供者,因为它离组件最近(如果组件本身不提供):

@Directive({
  selector: [tableLoader1],
  providers: [{provide: GridLoadUtil, useClass: GridLoadUtil1}],
})
class TableLoader1Directive {}

@Directive({
  selector: [tableLoader2],
  providers: [{provide: GridLoadUtil, useClass: GridLoadUtil2}],
})
class TableLoader2Directive {}

然后你可以像这样使用它

<xfg-table tableLoader1></xfg-table>
<xfg-table tableLoader2></xfg-table>

关于javascript - 多次出现相同的自定义指令Angular2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45759640/

相关文章:

带有 oidc-client.js 的 Angular 应用程序需要在第二个选项卡中登录

Angular http post 请求总是发送一个空对象

angular - 重定向到 Angular 中的上一页

javascript - 如何在 Google Table(或类似表)中包含迷你图和其他每行图形?

javascript - 切换在页面上出现两次的元素

javascript - Typescript 实现接口(interface)属性

javascript - 想要通过使用 Angular 2中的服务的子组件来控制父组件(菜单隐藏/显示)

dependency-injection - 在调用 bootstrap() 之前如何访问 angular2 的 Http 服务?

javascript - 如何在页面加载后执行 JavaScript?

javascript - 具有多个键的嵌套运算符的 D3.js 汇总