Angular2组件中的bootstrap-select data-content属性不会渲染

Angular2 component inside bootstrap-select data-content attribute does not render

本文关键字：属性 data-content 组件 bootstrap-select Angular2      更新时间：2023-09-26

我有一个混合的Angular 1/2 web应用程序，它使用Bootstrap Select (BS)进行选择。有了它，您可以在<option>元素上设置data-content属性，BS将<ul>和<li>元素插入到选择选项中。

我有以下Angular2组件:

@Component({
    selector: 'my-select',
    template: `
        <select>
            <option data-content="<my-other-component></my-other-component> Foo Bar">Foo Bar</option>
        </select>`
})
export class MySelectComponent {}

@Component({
    selector: 'my-other-component',
    template: '<span>Hello</span>',
})
export class MyOtherComponent {}

可以看到，在MySelectComponent的模板中，data-content属性中有一个组件。但是，它不会被Angular2处理。

选择本身被BS正确地拾取并生成一个样式良好的选择，但是data-content内部的组件没有被解析。为该选项生成的HTML如下所示:

<li><my-other-component></my-other-component> Foo Bar</li>

…而不是:

<li><span>Hello</span> Foo Bar</li>

我知道这是一个有点具体的问题，但有没有人遇到这个之前或有任何想法，我可以使这个工作?

你将不得不import你的组件，也包括你的component在directives meta-data内，如下所示:

import {MyOtherComponent} from '.app/my-other-component.component'
@Component({
    selector: 'my-select',
    template: `
        <select>
            <option data-content="<my-other-component></my-other-component> Foo Bar">Foo Bar</option>
        </select>`,
    directives: [MyOtherComponent]
})
export class MySelectComponent {}
相关文章：