Question

代码：

    @Component({selector: 'item1', template: 'item1'})
    export class Item1Component {}    

    @Component({selector: 'item2', template: 'item2'})
    export class Item2Component {}

    @Component({selector: 'item-group', template: `
       <ng-content></ng-content>
    `})
    export class ItemGroupComponent {

        @ContentChildren(Item1Component)// <-- ?
        private items: QueryList<Item1Component>;

        ngAfterContentInit() {
           console.log('items', this.items);
        }
    }
    //---------------------------------
    <item-group>
       <item1></item1>
       <item2></item2>
    </item-group>

Plunker https://plnkr.co/edit/jxoxWuuX0MAGym2irg0V?p=preview

问题：我可以使用@ContentChildren选择Item1Component或Item2Component但是如何在一个QueryList中选择Item1Component和Item2Component两种类型？

Answer 1

如果您将组件的类型作为参数传递，则不支持AFAIK。您可以通过

传递多个模板变量名称

data

或者您可以对所有项目使用相同的模板变量，并像

一样查询它们

@ContentChildren('item1,item2,item3')

Answer 2

这里唯一可以做的就是为输入内容中的每个子元素添加一个标识符：

<item-group>
  <item1 #i1></item1>
  <item2 #i2></item2>
</item-group>

并通过ID将其引用到@ContentChildren：

@ContentChildren('i1,i2')
private items: QueryList<any>;

在这种情况下，您将在查询列表中包含两个元素。

请参阅此plunkr：https://plnkr.co/edit/zVurr55KI9kwoJPwGzDw?p=preview。

如何在angular2中使用@ContentChildren选择多于一种类型

2 个答案: