NGXブートストラップポップオーバーは、私は、NGXブートストラップ<a href="http://valor-software.com/ngx-bootstrap/#/popover#popover-directive" rel="nofollow noreferrer">http://valor-software.com/ngx-bootstrap/#/popover#popover-directive</a></p> <p>を使用していますHTMLテンプレートファイルに

Question

をHTML文字列の作成を移動し、私は次のようにポップオーバーボディにHTMLを表示するには、ダイナミックHTMLスタイルを使用しています：

コントローラで

<span *ngFor="let item of items;"> 
    <template #popTemplate><div [innerHtml]="getPopoverDetails(item)"></div></template> 
    <img class="appIcon" [src]="item.image" [popover]="popTemplate"/>         
</span>  

：

private getPopoverDetails(item) { 
     let content = '<img class="" src="' + (item.image) + '"/>'; 
     content += '<span class="popup">' + (item.name) + '</span>' + 
       '<div class="row popup">' + 
        '<div class="col-xs-12">' + 
         '<span>XXX</span>' + 
        '</div>' + 
       '</div>' + 
       '<div class="row popup">' + 
        '<div class="col-xs-12">' + 
         '<span>' + ((typeof item.cost !== 'undefined') ? (item.cost) : '') + '</span>' + 
        '</div>' + 
       '</div>' + 
       '<div class="row popup">' + 
        '<div class="col-xs-12">' + 
         '<span>yy</span>' + 
        '</div>' + 
       '</div>' + 
       '<div class="row popup">' + 
        '<div class="col-xs-12">' + 
         '<span>' + ((typeof item.cost !== 'undefined') ? 'zz' : 'yy') + '</span>' + 
        '</div>' + 
       '</div>'; 
     return content; 
} 

さて、上記のアプローチで、私はHTMLでそれを構築するためのクリーンな方法があり、それはHTMLで、以来、等のコントローラで私のHTML文字列を構築するために抱えていますテンプレートファイル自体？ 私はコントローラやその他のタイスクリプトヘルパ関数でhtml文字列の作成をしたくありません。 HTMLはHTMLテンプレート自体の中でよりよく見えるでしょう。 は可能ですか？テンプレートに関数からの移行のhtmlを：：

Answer 1

これは役立つはず

<template #popTemplate><div> 
    <img class="" [attr.src]="item.image"/> 
    <span class="popup">{{ item.name }}</span> 
    <!-- and so on, put html from function here --> 
</div></template>