Angular 2 Component all'interno del bootstrap popover

Question

Poiché angular 2 non viene fornito con componenti completi completi, ho deciso di utilizzare bootstrap all'interno di angular 2. So che questa non è l'idea migliore in quanto interrompe il problema del virtual dome, ma non ho altra soluzione. Il problema che sto avendo è che il componente angular 2 non renderizzerà all'interno del popover html. qualcuno ha una soluzione per questo?

Sto guardando la classe Renderer e sembra essere la soluzione per me, ma non riesco a farlo funzionare. Ecco il codice:

• mio componente padre che detengono il popover

  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; 
  } 
  

mio evento-view componente che ho bisogno di rendere la popover

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() { 

    } 
} 

I penso che la mia soluzione sarà su Renderer.renderComponent ma non sono sicuro di come posso utilizzarlo.

Answer 1

Si potrebbe semplicemente

inizializzare un normale popover bootstrap come questo

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(); 
}); 

poi basta definire una funzione da chiamare sull'elemento che attiva il popover

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

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

Così , la prima volta che bootstrap inizializza un normale popover, ma impediamo il default di distruggere il contenuto html quando si nasconde, quindi devi semplicemente aggiungere una classe 'hide' a t, e poi quando vuoi attivarlo di nuovo basta semplicemente rimuovere quella classe, questo funziona per le direttive angolari, i binding, ecc.