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)向其提供数据,这使代码高度分离。

这是我泡菜的地方。如果我想在单个页面上拥有多个具有不同数据和结构的表,则不能将每个组件绑定到的服务是Singleton。

我可以选择不注入服务,而将每个服务作为设置器提供,但是在那种情况下,我将需要为每个服务创建子类,而目前我并不需要。而且,我的代码将变得耦合。

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

谢谢,
普拉蒂克

最佳答案

您可以创建一个指令以在此处提供服务。
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/

相关文章:

javascript - D3堆积分段图,按总计排序

javascript - Angular 2 : Unhandled Promise rejection: Cannot assign to a reference or variable

javascript - 在获取详细信息之后动态地动态检查与DOM相连的输入框

angular - 使用 Auth0 spa 快速入门时出错

javascript - 需要有关jQuery插件的帮助-TextExt输入

javascript - 隐藏后Flash对象的方法不可用

javascript - 产生敌人后碰撞检查循环停止循环

javascript - ionic 2 错误 : "No provider for Storage"

Angular 2 单元测试 beforeEachProvider 不注入(inject)服务

Angular 2 : If value exists show html