Açısal 2 Bileşen, önyükleme önyükleyicisi içinde

Question

Açısal 2 tam bir zengin bileşenle gelmediğinden, önyükleme 2 içinde önyükleme kullanmaya karar verdim. Bunun sanal kubbe sorununu kırdığı için en iyi fikir olmadığını biliyorum. diğer çözüm. Sorun şu ki açısal 2 bileşen popover html içinde işlemez. Bunun için herkesin bir çözümü var mı?

Renderer sınıfına bakıyorum ve bu benim için bir çözüm gibi görünüyor, ancak işe yaramayacağım. İşte bazı kod: popover tutun

• Benim ana bileşeni

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

Ben 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 işlemek gerekir My olay görünüm bileşeni Çözümümün Renderer.renderComponent öğesinde olacağını düşünün ancak nasıl kullanabileceğimi bilmiyorum.

Answer 1

sadece basitçe

popover

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

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

Yani aktive elemana çağrılacak sonra sadece bir fonksiyonu tanımlamak bu

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

gibi normal önyükleme popover ilklendireceğiniz , ilk kez bootstrap normal bir popover'ı başlatır, ancak gizlendiğinde html içeriğini yok etmeyi önleriz, sonra sadece 'hide' sınıfını eklersiniz. t ve daha sonra tekrar etkinleştirmek istediğinizde, sadece bu sınıfı kaldırırsınız, bu açısal yönergeler, bağlamalar vb. için çalışır.