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>;之类的文本列调用它，这种方法就可以工作但只获取文本列和图标列相同。我怎样才能实现这一点，我可以在以后为不同的columnTypes添加不同类型的指令？

Answer 1

@ 3xGuy的答案是正确的，但是除非提供的类型是在装饰器或装饰类see this Angular In Depth post之后定义的，否则不需要forwardRef(() => {})

请注意，这种方法可用于ContentChildren或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);
  }
}

app.component.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
   {
      //I do cool stuff here
   }
  @Directive({
       selector: 'icon-column',
       provider:[{provide:Column, useExisting:forwardRef(() => IconColumnDirective)})
   })
   export class IconColumnDirective extends Column
   {
      //I do different cool stuff   
   }

希望这有助于下一个人。

ContentChildren具有多种内容类型

2 个答案: