Angular 2 Component wewnątrz poppera bootstrap

Question

Ponieważ kąt 2 nie ma pełnych bogatych komponentów, zdecydowałem się użyć bootstrapu wewnątrz kątowego 2. Wiem, że to nie jest najlepszy pomysł, ponieważ łamie problem wirtualnej kopuły, ale ja nie mam inne rozwiązanie. Problem, który mam, to to, że kątowy 2 komponent nie będzie renderował wewnątrz haseł popover. Czy ktoś ma na to rozwiązanie?

Patrzę na klasy Renderer i wydaje mi się, że to rozwiązanie dla mnie, ale nie mogę go uruchomić. Oto kod:

• Moja składnikiem dominującym, które posiadają 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; 
  } 
  

Moje zdarzenia widok komponent, że trzeba uczynić w 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 myślę, że moje rozwiązanie będzie w Renderer.renderComponent, ale nie jestem pewien, jak mogę go użyć.

Answer 1

Mogłeś po prostu

zainicjować normalnego bootstrap popover jak ten

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

potem po prostu zdefiniować funkcję nazywać na elemencie, który aktywuje popover

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

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

SO , po raz pierwszy bootstrap inicjuje normalny popover, ale zapobiegamy domyślnemu zniszczeniu treści html podczas jej ukrywania, po prostu dodajesz klasę "hide" do i t, a następnie, gdy chcesz go ponownie aktywować, po prostu usuwasz tę klasę, działa to w przypadku dyrektyw kątowych, wiązań itp.