具有多种内容类型的 ContentChildren

Question

您好，我目前正在构建一个允许多列类型的表。我希望能够像这样使用它：

<my-table [rows]="rows">
     <text-column [someParameters]="here" header="text"></text-column>
     <icon-column [someParameters]="here" header="icon"></icon-column>
</my-table>

text-column并且icon-column是单独的指令。

我目前有一个名为的抽象类column，可以说text-column和icon-column可能看起来像：

   export abstract class Column
   {
       @Input() someParameters:string;
       @Input() header:string;
   }

   export class TextColumnDirective extends Column
   {
      //I do cool stuff here
   }

   export class IconColumnDirective extends Column
   {
      //I do different cool stuff   
   }

我的表可能看起来像：

@Component({
   selector:'my-table',
   template: `
        <table>
            <thead>
                <tr>
                   <th *ngFor="let column of columns">{{column.header}}</th>
                </tr>
            </thead>
        </table>
   `
})
export class MyTableComponent
{
    @ContentChildren(Column) columns:QueryList<any>;

    //I do cool stuff too
}

因此，如果我不使用摘要并仅使用文本列调用它，则此方法有效，@ContentChildren(TextColumnDirective) columns:QueryList<any>; 但仅获取文本列，并且与图标列相同。我怎样才能做到这一点，我可以稍后为不同的 columnType 添加不同类型的指令？

Answer 1

@3xGuy 的答案是正确的，但forwardRef(() => {})不是必需的，除非提供的类型是在装饰器或装饰类之后定义的，请参阅此 Angular In Depth 帖子

请注意，此方法可用于ContentChildrenor ViewChildren，下面我使用ViewChildren

item.ts

import { Directive } from '@angular/core';

export class Item {
  color = '';
}

@Directive({
  selector: '[blueItem]',
  providers: [{ provide: Item, useExisting: BlueItemDirective }],
})
export class BlueItemDirective { // 'extends Item' is optional
  color = 'blue';
}

@Directive({
  selector: '[redItem]',
  providers: [{ provide: Item, useExisting: RedItemDirective }],
})
export class RedItemDirective { // 'extends Item' is optional
  color = 'red';
}

app.component.ts

import { Component, ViewChildren, QueryList } from '@angular/core';

import { Item } from './item';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Multiple View Child Types';

  // Note we query for 'Item' here and not `RedItemDirective'
  // or 'BlueItemDirective' but this query selects both types
  @ViewChildren(Item) viewItems: QueryList<Item>;

  itemColors: string[] = [];

  ngAfterViewInit() {
    this.itemColors = this.viewItems.map(item => item.color);
  }
}

应用程序组件.html

<div redItem>Item</div>
<div blueItem>Item</div>
<div blueItem>Item</div>
<div blueItem>Item</div>
<div redItem>Item</div>

<h2>Colors of the above directives</h2>
<ul>
  <li *ngFor="let color of itemColors">{{color}}</li>
</ul>

这是一个StackBlitz，显示了这种行为。

Answer 2

好的，所以在上面的评论中，我被告知要查看他们提供的链接的评论。

也就是说，我们的答案是正确的，我将在这里为下一个人发布代码。

<my-table [rows]="rows">
  <text-column [someParameters]="here" header="text"></text-column>
  <icon-column [someParameters]="here" header="icon"></icon-column>
</my-table>

@Directive({
  selector: 'text-column',
  provider: [{provide:Column,useExisting:forwardRef(() => TextColumnDirective)})
})
export class TextColumnDirective extends Column
{
  // ...
}

@Directive({
  selector: 'icon-column',
  provider:[{provide:Column, useExisting:forwardRef(() => IconColumnDirective)})
})
export class IconColumnDirective extends Column
{
  // ...
}

希望这对下一个人有帮助。