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

Posted 2023-02-22

【中文标题】Angular 2 在 3rd 方指令中使用自定义组件选择器

【英文标题】：Angular 2 use custom component selector in 3rd party directive

【发布时间】：2016-10-03 18:38:51

【问题描述】：

我正在使用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注解中？

【参考方案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>。

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