बूटस्ट्रैप पॉपओवर के अंदर कोणीय 2 घटक

Question

चूंकि कोणीय 2 पूर्ण समृद्ध घटकों के साथ नहीं आ रहा है, इसलिए मैंने कोणीय गुंबद के अंदर बूटस्ट्रैप का उपयोग करने का निर्णय लिया है। मुझे पता है कि यह वर्चुअल गुंबद समस्या को तोड़ने का सबसे अच्छा विचार नहीं है, लेकिन मेरे पास नहीं है अन्य समाधान मेरी समस्या यह है कि कोणीय 2 घटक पॉपओवर एचटीएमएल के अंदर प्रस्तुत नहीं करेगा। किसी के पास इसका समाधान है?

मैं रेंडरर क्लास देख रहा हूं और ऐसा लगता है कि यह मेरे लिए समाधान है, लेकिन मैं इसे काम नहीं कर सकता। यहाँ कुछ कोड है:

• मेरे माता-पिता घटक है कि पॉपओवर पकड़

  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

तुम बस बस

इस

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

की तरह एक सामान्य बूटस्ट्रैप पॉपओवर प्रारंभ तो आप सिर्फ एक समारोह में निर्धारित कर सकते तत्व यह है कि पॉपओवर

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

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

तो सक्रिय हो जाता है पर कहा जा , पहली बार बूटस्ट्रैप एक सामान्य पॉपओवर शुरू करता है, लेकिन जब हम छिपाते हैं तो हम HTML सामग्री को नष्ट करने के डिफ़ॉल्ट को रोकते हैं, तो आप बस मुझे 'छुपाएं' कक्षा जोड़ते हैं I टी, और फिर जब आप इसे फिर से सक्रिय करना चाहते हैं तो आप बस उस वर्ग को हटा दें, यह कोणीय निर्देशों, बाइंडिंग आदि के लिए काम करता है