Angular 2 Component bên trong bootstrap popover

Question

Vì angular 2 không đi kèm với một thành phần phong phú, tôi quyết định sử dụng bootstrap bên trong góc 2. Tôi biết đây không phải là ý tưởng tốt nhất vì nó phá vỡ vấn đề mái vòm ảo, nhưng tôi không có giải pháp khác. Vấn đề mà tôi đang gặp là thành phần góc 2 sẽ không hiển thị bên trong html popover. Bất cứ ai cũng có một giải pháp cho điều này?

Tôi đang xem lớp Renderer và có vẻ như đó là giải pháp cho tôi, nhưng tôi không thể làm cho nó hoạt động. Dưới đây là một số mã:

• thành phần cha mẹ của tôi mà giữ 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; 
  } 
  

My phần sự kiện quan điểm cho rằng tôi cần phải làm trong 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() { 

    } 
} 

tôi nghĩ rằng giải pháp của tôi sẽ ở Renderer.renderComponent nhưng tôi không chắc làm thế nào tôi có thể sử dụng nó.

Answer 1

Bạn có thể chỉ đơn giản là

khởi tạo một bootstrap popover bình thường như thế này

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

sau đó bạn chỉ cần định nghĩa một hàm được gọi vào các yếu tố kích thích sự hình popover

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

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

Vì vậy, , lần đầu tiên bootstrap khởi tạo popover bình thường, nhưng chúng tôi ngăn chặn mặc định phá hủy nội dung html khi nó ẩn, sau đó bạn chỉ cần thêm lớp 'ẩn' vào i t, và sau đó khi bạn muốn kích hoạt lại, bạn chỉ cần xóa lớp đó, thao tác này cho các chỉ thị góc, ràng buộc, v.v.