角型2コンポーネント内のブートストラップポップオーバー

Question

角度2には豊富なコンポーネントが付属していないので、私は角度2の中でブートストラップを使用することにしました。これは仮想ドームの問題を壊すのでベストなアイデアではありませんが、他の解決策。私が抱えている問題は、角度2のコンポーネントがpopover htmlの内部でレンダリングされないということです。誰にでもこれに対する解決策がありますか？

私はRendererクラスを見ていて、それは私にとっての解決策だと思われますが、動作させることはできません。ここではいくつかのコードは次のとおりです。

• ポップオーバー

  ngAfterViewInit() { 
  // viewChild is updated after the view has been initialized 
  
      var elements = jQuery(this.elementRef.nativeElement).find('[data-toggle="popover"]'); 
      jQuery.each(elements, jQuery.proxy(function(index, element){ 
        var eventId = jQuery(element).prop('id'); 
        jQuery(element).popover({ html : true, 
                 placement: 'top', 
                 container: 'body', 
                 content: this.getEventContent(eventId) }); 
      }, this));  
  } 
  getEventContent(eventId){ 
      var selectedEvent = this.getEvent(eventId); 
      var button = jQuery('<button type="button" class="btn register"></button>'); 
  
      var angularViewHolder= jQuery('<div></div>'); 
  
      this.renderer.createElement(angularViewHolder[0], 'event-view') 
      button.attr('id', eventId); 
      return selectedEvent.description + '<br />' + 
       button[0].outerHTML + angularViewHolder[0].outerHTML; 
  } 
  

を保持する私の親コンポーネントは、私はポップオーバーでレンダリングする必要が私のイベントビューコンポーネント

import {Component, View} from 'angular2/core'; 
@Component({ 
    selector: 'event-view', 
    template: '<div>Application details for application id: <h1>{{id}}</h1> will be loaded here!</div>', 
    inputs: ['id'] 
}) 

export class EventView { 
    id: string; 
    constructor() { 

    } 
} 

私は私の解決策はRenderer.renderComponentにあると思うが、私はそれをどのように利用できるかわからない。

Answer 1

あなたは単に

は、あなただけのポップオーバーだから、

showToolTip(){ 
    if(!this.popover_initialized){ 
     return; 
    } 

    $(".popover[role=tooltip]").removeClass('hide'); 
} 

を活性化させる要素で呼び出される関数を定義し、この

let popOver = $('[rel="popover"]'); 

popOver.popover({ 
    container: 'body', 
    html: true, 
    content: function() { 
     return $('#myContent').removeClass('hide'); 
    } 
}).click(function(e) { 
    e.preventDefault(); 
}); 

popOver.on('show.bs.popover', (event) => { 
    this.popover_initialized = true; 
}); 

popOver.on('hide.bs.popover', (event) => { 
    $(".popover[role=tooltip]").addClass('hide'); 

    event.preventDefault(); 
    event.stopImmediatePropagation(); 
}); 

のような通常のブートストラップポップオーバーを初期化することができ最初のブートストラップでは通常のポップオーバーが初期化されますが、HTMLコンテンツが非表示になった場合、そのデフォルトのHTMLコンテンツを破棄しないようにします。あなたは再びそのクラスを削除するだけですが、これはアンギュラディレクティブ、バインディングなどのために働きます