Question

我有一个名为button-search的组件，其中包含搜索选项的下拉列表：

<button-search> 
    <item type="identifier">Identifier</item>
    <item type="title">Title</item>
    <item type="city">City</item>
    <item type="town">Town</item>
    <item type="address">Address</item>
    <item type="postal">Postal</item>
    <item type="divider"></item>
    <item type="clear">Clear Search</item>
</button-search>

item组件不应该直接呈现任何内容，而是将复杂的参数传递到button-search组件，以便button-search组件可以按照它应该的方式呈现这些下拉项被渲染。

Item定义如下：

@Component(
    selector: 'item',
    template: '')
class Item {

    @Input() String type = "type-goes-here";

}

ButtonSearch定义如下：

@Component(
    selector: 'button-search',
    directives: const[Item],
    template: '''
       ... enormous template ...    
    ''')
class ButtonSearch {

    ButtonSearch(@ViewChildren(Item) QueryList<Item> items){

        print(items);

    }
}

我没有看到打印到控制台的9个项目列表，而是[]。

我尝试过使用String参数而不是对象，但它仍然给我null。

ButtonSearch(@ViewChildren('item') QueryList<Item> items){

我错过了什么让@ViewChildren获取所有项目并打印除[]
以外的其他内容
在<item>和</item>或@ViewChild之间是否需要做一些特殊工作才能获得该文字？

更新：更改模板以包含<ng-content></ng-content>：

template: '''
          <ng-content></ng-content>
           ... enormous template ...    
        ''')

我可以看到以下内容作为button-search组件的一部分在浏览器中打印：

标识符，标题，城市，城镇，地址，邮政，清除搜索

所以至少我知道我所在的网页上的button-search组件中有项目。

Answer 1

应该是

@Component(
    selector: 'button-search',
    directives: const[Item],
    template: '''
       <ng-content></ng-content>
       ... enormous template ...    
    ''')
class ButtonSearch implements AfterContentInit{
    @ContentChildren(Item) QueryList<Item> items;

    ngAfterContentInit() {
        print(items);
    }    
}

另见https://stackoverflow.com/a/35209681/217408

还有@Query()注释允许构造函数注入对子元素的引用，但它被标记为已弃用。

<强> <ng-content>
如果您将“内容”作为子项传递给您的组件，则可以使用@ContentChildren()而不是@ViewChildren()来查询它们。如果您希望它们显示在DOM中，您还需要添加<ng-content></ng-content>标记作为转换的目标。您还可以拥有多个<ng-content></ng-content>代码，其中select=".someCssSelector"可用于在特定目标位置转换内容的子集。但是，应该只有一个<ng-content></ng-content>没有select属性。没有select的第一个将定位与其他选择器不匹配的所有内容。

Plunker example

Angular2 Dart - 获取组件的子元素

1 个答案: