未显示通过 DI 的 Angular2 模态确认对话框答案

【问题标题】：Angular2 modal confirmation dialog via DI not shown未显示通过 DI 的 Angular2 模态确认对话框
【发布时间】：2016-11-09 22:13:32
【问题描述】：

复制：http://plnkr.co/edit/YLOf2BLMi93Jg5yOgA96

我正在尝试通过调整http://koscielniak.me/post/2016/03/angular2-confirm-dialog-component/ 中的代码以使用 Bootstrap 样式而不是材料设计，从而为我的 angular2 应用程序使用简单的确认模式。

我喜欢这个确认对话框背后的想法，因为它简单且面向 Angular2：您只需在组件中注入一个服务，就可以调用确认对话框，并通过 Promise 获取结果。服务只是：

export class ConfirmService {
    public activate: (message?: string, title?: string) => Promise<boolean>;
}

通过此服务使用确认对话框。当注入到confirm组件中时，该服务的activate函数会绑定到该组件中对应的函数。该组件负责操作 DOM 以显示对话框并返回结果（通过 Promise）。

这是组件的构造函数：

constructor(confirmService: ConfirmService) {
    confirmService.activate = this.activate.bind(this);
}

这样，我们必须：

将组件添加到根应用组件的模板中，以便可以在整个组件树中使用。
注入此服务以在任何地方使用它。

现在这似乎工作和调试我可以看到绑定组件的函数被调用，并且 DOM 元素引用（通过 document.getElementById 获得，就像在原始代码中一样，因为我试图最小化我的更改；我想使用绑定@ViewChild 属性会更好）不为空。然而，当其opacity 设置为 1 时，不会显示该对话框，控制台中也不会出现任何错误。您可以在本文顶部引用的 Plunker 中轻松看到它。有什么建议吗？

【问题讨论】：

标签： angular typescript twitter-bootstrap-3

【解决方案1】：

因此，从我通过您提供的 plunker 可以看出，这里的实际问题是您没有将元素样式的显示值从 none 更改为它将显示的值。

为此，请将此行添加到 show 函数的末尾：

    this._confirmElement.style.display = 'block';

Plunker 从你的分叉： http://plnkr.co/edit/b3inbVhKK5PzV6NdQngq?p=preview

作为建议，您可以将 ViewChild 和 ElementRef 与模板变量命名一起使用，以使事情的类型更强一些，并放弃您的 ngOnInit 分配。

<div #myModal>
@ViewChild('myModal') _confirmElement: ElementRef;

【讨论】：