6

由于 Angular 2 没有提供完整的丰富组件，我决定在 Angular 2 中使用引导程序。我知道这不是最好的主意，因为它打破了虚拟圆顶问题，但我没有其他解决方案。我遇到的问题是 angular 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;  
}

我需要在弹出窗口中呈现的事件视图组件

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 但我不确定如何使用它。

4

1 回答 1

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 内容的默认设置，然后你只需添加一个“隐藏”类，然后当你想再次激活它时，你只需删除那个类，这适用于角度指令、绑定等

于 2017-04-27T01:25:02.333 回答