结构指令获取子指令

Question

我正在尝试访问结构指令中的 'child' 指令，以便我可以在该指令中注入一些数据。但这总是导致未定义或注入错误。

我有以下 html:

<app-table [dataSource]="data">
  <button *customColumn="let row" [highlightRowOnClick]="row">
    click here!
  </button>
</app-table>

我想通过 customColumn 将所有行注入到 [highlightRowOnClick] 指令中，这样它就可以删除 select 单击当前行时的所有其他行

我想如何将所有行传递给指令：（app-table --> *customColumn --> [highlightRowOnClick]）。

我已经创建了一个 Stackblitz 重现此问题，行 selection 有效，但行 deselection 无效。

我的心得

我知道我无法通过 @ContentChildren 访问子组件，因为 [highlightRowOnClick] 指令不是直接子组件，而是视图中的兄弟组件（).
我知道结构指令可以 select 它是宿主元素（例如属性指令，参见 ngSwtich, via the @Host decorator), but this doesn't work the other way arround. This results in an Injector error (no provider for 'customColumn' found). (this is described here）
我可以使用服务来注入数据，但是当当前视图中有多个 table 时，这可能会产生错误（因为服务是单个实例和行可能完全相同，有些行可以相互覆盖，导致奇怪的 selection 问题（例如 selection 在两个 tables 中发生）。
我可以将行直接注入到 [highlightRowOnClick] 指令中，但这需要程序员每次都这样做。在我看来，您只想突出显示当前行是有道理的，我也不想在那个地方向程序员公开所有行，因为他已经可以通过 [dataSouce] 访问它们。所以我认为这不是最好的解决方案。

示例：

<app-table [dataSource]="rows">
  <button *customColumn="let row; let rows=rows" [highlightRowOnClick]="row" allRows="rows">
    click here!
  </button>
</app-table>

有谁知道解决这个问题的更好方法吗？或者也许是一种完全不同的方法？

Answer 1

由于包装器组件中包含所有内容，因此您可以将其注入 HighlightRowOnClickDirective

constructor(@Optional() @Host() private wrap:WrapperComponent ){}
  @Input('highlightRowOnClick')
  row: Row;

  @HostListener('click')
  onClick(): void {
    this.wrap.dataSource.forEach(x=>{
      x.isSelected=(x==this.row)
    })
  }
}

见stackblitz

但我真的不知道为什么不使用变量 "indexSelected" 而使用 *ngFor="...;let i=index" 并作为参数传递

更新使用索引 Select。

我们可以在行 "isSelected" 中有一个变量或在包装器 "indexSelected" 中有一个唯一变量，并将索引

作为值传递

<div *ngFor="let row of dataSource;let i=index">
  <div [class.selected]="i==indexSelected"> Hello world! </div>
  <ng-container *ngFor="let col of colHeaders">
     <ng-template *ngTemplateOutlet="col.template; context: { $implicit: i }"></ng-template>
  </ng-container>
  <br><br>
</div>

指令变为

 @Input('highlightRowOnClick')index:number

  @HostListener('click')
  onClick(): void {
    this.wrap.indexSelected=this.index
  }

见another stackblitz

结构指令获取子指令

Structural directive get child directive

typescript

angular-directive

angular