Question

我有一个混合的Angular 1/2网络应用程序，使用Bootstrap Select（BS）进行选择。有了它，您可以在BS所采用的data-content元素上设置<option>属性，并将其插入到选择选项中（使用<ul>和<li＆gt;元素）。

我有以下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 {}

正如您所见，data-content模板中的MySelectComponent属性中有一个组件。但是，它不会被Angular2处理。

选择本身由BS正确选取并生成一个很好的样式选择，但data-content内的组件未被解析。生成的选项HTML如下所示：

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

......而不是：

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

我知道这是一个具体的问题，但是之前有没有人遇到这个问题，或者知道如何让这项工作成功？

Answer 1

您必须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 {}

bootstrap-select数据内容属性中的Angular2组件不会呈现

1 个答案: