Свойство компонента HTML-кода Angular2

Следуя примеру для создания представления вкладок с помощью ng2-bootstrap из http://valor-software.com/ng2-bootstrap/, у меня есть следующий код:

<tabset>
<tab *ngFor="#tabz of tabs"
     [heading]="tabz.title"
     [active]="tabz.active"
     (select)="tabz.active = true"
     (deselect)="tabz.active = false"
     [disabled]="tabz.disabled"
     [removable]="tabz.removable"
     (removed)="removeTabHandler(tabz)">
    {{tabz?.content}}
</tab>

Но я хочу, чтобы HTML-код извлекался из свойства {{tabz?.content}}. Есть ли способ сделать это? Мой массив вкладок выглядит так:

public tabs:Array<any> = [
{title: 'Summary View', content: 'Dynamic content 1', active: true},
{title: 'Search View', content: '<someAngularComponent>Error Displaying Entry view</someAngularComponent >'}];

javascript angular html twitter-bootstrap ng2-bootstrap
person Nandan Phadke    schedule 14.04.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward 

<tabset>
<tab *ngFor="#tabz of tabs"
     [heading]="tabz.title"
     [active]="tabz.active"
     (select)="tabz.active = true"
     (deselect)="tabz.active = false"
     [disabled]="tabz.disabled"
     [removable]="tabz.removable"
     (removed)="removeTabHandler(tabz)"
     [innerHTML]="tabz?.content">
</tab>

Вы должны знать, что Angular не очищает HTML и не обрабатывает его каким-либо другим способом. Привязки типа [], (), {{}}, <my-comp>, <div myDirective> игнорируются Angular с помощью HTML, добавленного таким образом.

person Günter Zöchbauer    schedule 15.04.2016
comment
Большое спасибо. Я новичок в фронтенд-разработке. Есть ли способ/рекомендация по очистке HTML? - person Nandan Phadke; 15.04.2016
comment
Вы также сказали, что ‹my-comp›, ‹div myDirective› игнорируются Angular. Вы имеете в виду, даже если они являются частью содержимого [innerHTML]? Если да, то как мне загрузить компонент Angular в innerHTML? - person Nandan Phadke; 15.04.2016
comment
С динамическим HTML из Angular мало что можно сделать. Если у вас есть статический HTML, такой как <div #someTarget></div>, вы можете использовать DynamicComponentLoader для добавления компонентов в #someTarget. - person Günter Zöchbauer; 15.04.2016

arrow_upward
1
arrow_downward

Обычная html-инъекция:

<tab [innerHTML]="tabz?.content">

Шаблоны/компоненты Angular2 не могут быть введены так же, как указано выше, вы можете обернуть содержимое в компонент и загрузить его с помощью DynamicComponentLoader, вызванного событием (select).

person kemsky    schedule 15.04.2016
comment
Что-то новое в этом... не могли бы вы предоставить ссылку/пример использования DynamicComponentLoader в событии (выбрать)? - person Nandan Phadke; 15.04.2016
comment
В официальной документации есть хороший пример. - person kemsky; 15.04.2016
comment
html-инъекция помогла мне. Кстати, не то, чтобы я хотел, но ссылка в предыдущем примере не работает. Также кажется, что с окончательным выпуском angular DynamicComponentLoader больше не доступен. - person Jay; 12.10.2016