Как получить Angular2 для связывания компонента в innerHTML

Я хочу создать компонент myApp, который будет внедрять HTML из свойства на контроллере в его шаблоне. Однако некоторые из этих HTML могут включать в себя другие селектора компонентов.

import {InfoComponent} from ...
@Component({
    selector: 'myApp',
    template: `<div [innerHTML]='hData'></div>
               <myInfo></myInfo>`,
    directives: [InfoComponent]
})
export class AppComponent {
   hData = "<myInfo></myInfo>";
}

@Component({
   selector: 'myInfo',
   template: "<b>This is a test</b>"
})
export class InfoComponent {
}

В этом примере я ожидаю увидеть дважды This is a test. Тем не менее, не кажется, что движок Angular2 подбирает тот факт, что селектор компонента был введен, поэтому шаблон никогда не генерируется для селектора <myInfo></myInfo>, который добавляется через привязку.

Здесь вы можете увидеть демонстрацию .

Есть ли способ получить Angular2 для синтаксического разбора селектора так же, как с селектором, который явно добавлен в шаблон?

Ответ 1