具有多种内容类型的 ContentChildren [英] ContentChildren with multiple content types

问题描述

您好，我目前正在构建一个允许其中包含多种列类型的表.我希望能够像这样使用它:

Hello I am currently building a table that will allow multiple column types in it. I want to be able to use this like:

<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 是单独的指令.

text-column and icon-column are separate directives.

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

I currently have an abstract class called column and lets say the text-column and the icon-column may look something like:

   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   
   }

我的桌子可能看起来像:

My table may look something like:

@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，则此方法有效但只获取文本列，与图标列相同.我怎样才能做到这一点，以后我可以为不同的 columnType 添加不同类型的指令?

So this approach works if I do not use an abstract and just call it with just text column like @ContentChildren(TextColumnDirective) columns:QueryList<any>; but only gets the text column and the same with the icon column. How can I accomplish this where I can add different types of directives for different columnTypes later?

推荐答案

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

Ok, so in the comments above I was told to look at comment at a link they provided.

也就是说，他们的答案是正确的，我将在此处为下一个人发布代码.

That said, they we're correct in the answer I will post the code here for the next person.

<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
{
  // ...
}

希望这对下一个人有所帮助.

Hope this helps next person.

这篇关于具有多种内容类型的 ContentChildren的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！