Question

我正在为我的网络应用程序使用Angular2和bootstrap。

我使用了很多引导程序对话框，我注意到使它们运行良好的唯一方法是将它们作为 body 标记的最后一个子项。

但是如何使用angular2和没有第三方库（我找到的所有库都没有支持）呢？

我创建了这个包装器：

export abstract class BaseDialogComponent<TArgument, TResult> implements OnDestroy
{
    @Input() id:number;
    @Input() openDialogEvent:EventEmitter<TArgument>;
    @Output() closeEvent:EventEmitter<TResult> = new EventEmitter<TResult> ();

    public argument:TArgument = <any>{};
    private openDialogEventSubscription:EventSubscription;

    public constructor ()
    {
        setTimeout (() => {
            this.openDialogEventSubscription = this.openDialogEvent.subscribe (arg => {
                this.argument = arg;
                this.onDialogReady ();

                jQuery('#' + this.id).modal();
            });
        });
    }

    public ngOnDestroy ()
    {
        if (this.openDialogEventSubscription)
            this.openDialogEventSubscription.unsubscribe ();
    }

    protected abstract onDialogReady ():void;

    protected onCloseClick ()
    {
        this.closeDialog (undefined);
    }

    protected closeDialog (result:TResult)
    {           
        jQuery('#' + this.id).modal ("hide");

        if (result !== undefined)
            this.closeEvent.emit (result);
    }
}

你可以像这样使用它：

@Component({
    moduleId : module.id,
    selector: 'my-selector',
    templateUrl: 'my-template.component.html',
})
export class CompanyDetailsDialogComponent extends BaseDialogComponent<string, void> 
{     
    protected onDialogReady ():void 
    {
        alert ('hello ' + this.argument);
    }
}

使用起来非常舒适，效果很好，但这样html代码就位于使用对话框的组件内部，而不是直接位于 body 标记中。

您能否建议我如何在agular2中正确使用引导程序对话框？

Angular2中的Bootstrap模式

0 个答案: