Angular 2 在第 3 方指令中使用自定义组件选择器

Question

我正在使用 ng2-bootsrap's accordion directive。

使用此语法与正常 html 配合使用时效果很好：

<accordion>
    <accordion-group heading="Heading 1">
        <div>Quick Search...</div>
    </accordion-group>
</accordion>

我想从我的组件之一插入一个选择器，如下所示：

<accordion>
    <accordion-group heading="Heading 1">
        <quick-search></quick-search>
    </accordion-group>
</accordion>

当我添加我的组件时，解析器只是删除了选择器并且没有在其位置显示任何内容。如果手风琴是我创建的指令，我通常会将我的组件 (QuickSearchComponent) 添加到指令列表中，如下所示：

@Component({
   ...
   directives: [QuickSearchComponent]
   ...
})

但这是第 3 方指令。如何让指令识别它或添加到@Component.directives注解？

Answer 1

directives: [QuickSearchComponent]

包含

的组件需要

<accordion>
    <accordion-group heading="Heading 1">
        <quick-search></quick-search>
    </accordion-group>
</accordion>

并且在 accordion 或 accordion-group 组件中不是必需的。

accordion-component 中需要的是 <ng-content> 标签，其中包含 <quck-search>。

如果它适用于 <div>Quick Search...</div> 那么它也应该适用于 <quick-search></quick-search>。

问题是由其他原因引起的。