Как показать unescaped HTML в angular2 ng-content?

Question

У меня есть компонент modal, который отображает модальное всплывающее окно и отображает переведенное ng-content на нем.

Вот что я пытаюсь делать в modal компонента:

<modal>{{someHTMLString}}</modal> 

Когда я делаю это, HTML разметка спасся и отображается (что я ожидал).

Так что я попытался это:

<modal [innerHTML]="someHTMLString"></modal> 

HTML, является неэкранированный, но это как-то появляется на экране, а не включены через содержание, как будто <modal> был обычным HTML тег, а фактическое модальный появляется пустой.

Как я могу найти ng-content неиспользуемый HTML?

Answer 1

ng-content позволяет создавать статическое (компилируемое временное разрешение) проекцию .

Вы можете использовать родительский DIV для достижения этой цели:

@Component({ 
    selector: 'my-app', 
    template: ` 
     <modal> 
     <div [innerHTML]="html"></div> 
     </modal> 
    `, 
})