Twitter bootstrap 角2组件内部引导popover

由于angular 2没有完整丰富的组件，我决定在angular 2内部使用引导。我知道这不是最好的主意，因为它打破了虚拟穹顶的问题，但我没有其他解决方案。我遇到的问题是angular 2组件不会在popover html中呈现。有人能解决这个问题吗

我正在查看Renderer类，它似乎是我的解决方案，但我无法让它工作。下面是一些代码：

• 包含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;  
  }
  

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

  showToolTip(){
      if(!this.popover_initialized){
          return;
      }
  
      $(".popover[role=tooltip]").removeClass('hide');
  }
  

  ngAfterViewInit（）{
  //viewChild在视图初始化后更新
  var elements=jQuery（this.elementRef.nativeElement）.find（'[data toggle=“popover”]'）；
  每个（元素，jQuery.proxy）（函数（索引，元素）{
  var eventId=jQuery（element）.prop（'id'）；
  jQuery（element）.popover（{html:true，
  位置：'顶部'，
  容器：'主体'，
  内容：this.getEventContent（eventId）}）；
  }这),；
  }
  getEventContent（eventId）{
  var selectedEvent=this.getEvent（eventId）；
  var按钮=jQuery（“”）；
  var angularViewHolder=jQuery（“”）；
  this.renderer.createElement（angularViewHolder[0]，“事件视图”）
  button.attr（'id'，eventId）；
  返回selectedEvent.description+'
  '+
  按钮[0]。outerHTML+角度视图保持器[0]。outerHTML；
  }
  

我需要在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;  
}

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() {

    }
}

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

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

从'angular2/core'导入{Component，View}；
@组成部分({
选择器：“事件视图”，
模板：“将在此处加载应用程序id:{{id}}的应用程序详细信息！”，
输入：['id']
})
导出类事件视图{
id：字符串；
构造函数（）{
}
}

我想我的解决方案是Renderer.renderComponent，但我不确定如何使用它

你可以简单地

像这样初始化一个普通的引导弹出程序

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

然后，您只需定义一个要在激活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;  
}

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() {

    }
}

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

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

---

因此，第一次引导初始化一个普通的popover，但是我们防止默认情况下在它隐藏时破坏html内容，然后您只需向它添加一个“hide”类，然后当您想再次激活它时，您只需删除该类，这适用于角度指令、绑定，etc

您研究过ng2引导程序吗？谢谢Evan的建议。ng2引导还没有popover。它有一个工具提示，但仍然太弱。@MohyEldeen请尝试在popover内容中显示angular2参数，但如果要在其中调用函数，则该函数未定义。例如，有一个输入字段和一个按钮将该值提交给角度分量。ng2 popover能做到这一点吗？ng bootstrap库很好地支持。不过，您必须愿意使用Bootstrap4。