由于角度2没有配备完整的丰富组件,我决定在角度2内使用自举.我知道这不是最好的主意,因为它打破了虚拟圆顶问题,但我没有其他解决方案.我遇到的问题是角度2组件不会在popover html中呈现.有人有解决方案吗？
我正在看Renderer类,它似乎是我的解决方案,但我无法让它工作.这是一些代码：
>我的父组件,用于保存弹出窗口
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;
}
我需要在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() {
}
}
我认为我的解决方案将在Renderer.renderComponent,但我不知道如何使用它.
解决方法
你可以简单地说
像这样初始化一个正常的bootstrap popover
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');
}
所以,第一次bootstrap初始化一个普通的popover,但我们阻止默认情况下销毁html内容,然后你只需添加一个’hide’类,然后当你想再次激活它时你只需删除该类,适用于角度指令,绑定等