引導選擇數據內容屬性中的Angular2組件不渲染

Question

我有一個混合的Angular 1/2 Web應用程序，它使用Bootstrap Select（BS）進行選擇。有了它，您可以在<option>上設置一個data-content屬性，BS將獲取並插入選擇選項（使用<ul>和<li><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 {} 

正如你可以看到有在模板中的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 {}