twitter-bootstrap – Angular 2 Component内部的bootstrap popo

发布时间：2020-12-18 00:28:49 所属栏目：安全来源：网络整理

导读：由于角度2没有配备完整的丰富组件,我决定在角度2内使用自举.我知道这不是最好的主意,因为它打破了虚拟圆顶问题,但我没有其他解决方案.我遇到的问题是角度2组件不会在popover html中呈现.有人有解决方案吗？我正在看Renderer类,它似乎是我的解决方案,但我无

由于角度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’类,然后当你想再次激活它时你只需删除该类,适用于角度指令,绑定等

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!