Angular 2 Component im bootstrap popover

Question

Da angular 2 nicht mit vollen Komponenten ausgeliefert wird, entschied ich mich Bootstrap in eckigen 2 zu verwenden. Ich weiß, das ist nicht die beste Idee, da es das Problem der virtuellen Dome löst, aber ich habe keine andere Lösung. Das Problem, das ich habe, ist, dass eckige 2 Komponente innerhalb des popover html nicht rendert. Hat jemand eine Lösung dafür?

Ich schaue auf die Renderer-Klasse und es scheint die Lösung für mich zu sein, aber ich kann es nicht zum Laufen bringen. Hier ist ein Code:

• Meine Eltern Komponente, die die popover halten

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

Meine Event-View-Komponente, die ich brauche in der popover zu machen

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 denke, dass meine Lösung bei Renderer.renderComponent sein wird, aber ich bin nicht sicher, wie ich es verwenden kann.

Answer 1

Sie könnten nur einfach

einen normalen Bootstrap popover wie diese

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

initialisieren dann definieren Sie nur eine Funktion auf dem Element genannt werden, dass die popover

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

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

So aktiviert , initialisiert das Bootstrap zum ersten Mal ein normales Popover, aber wir verhindern, dass standardmäßig der HTML-Inhalt zerstört wird, wenn er ausgeblendet wird. Dann fügen Sie einfach eine "hide" -Klasse zu i hinzu t, und dann, wenn Sie es wieder aktivieren möchten Sie einfach entfernen Sie diese Klasse, das funktioniert für eckige Direktiven, Bindungen, etc.