Angular2-Komponente innerhalb Bootstrap-wählen Daten-Content-Attribut nicht rendern

Question

Ich habe eine hybride Angular 1/2 Web-App, die Bootstrap Select (BS) für wählt verwendet. Damit können Sie ein data-content Attribut auf <option> Elemente setzen, die BS übernimmt und in die Auswahloptionen einfügt (mit <ul> und <li> Elementen).

Ich habe folgende Angular2 Komponenten bekam:

@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 {} 

Wie Sie eine Komponente gibt es in der data-content Attribut in der Vorlage für MySelectComponent sehen können. Es wird jedoch nicht von Angular2 verarbeitet.

Die Auswahl selbst wird von BS richtig aufgenommen und erzeugt eine schön gestylte Auswahl, aber die Komponente innerhalb der data-content wird nicht geparst. Der erzeugte HTML-Code für die Option wie folgt aussieht:

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

... statt dem:

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

Ich weiß, das ist ein bisschen von einer bestimmten Frage, aber hat in dieser jemand läuft vor oder Hast du eine Idee, wie ich das schaffen kann?

Answer 1

Sie Ihre Komponente import haben und auch Ihre component innen directives meta-data wie unten:

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 {}