如何在没有 Bootstrap 和 jQuery 的情况下创建 Angular2 模态组件？

Question

关于该主题的所有搜索都会导致导入依赖于 Bootstrap 的现有组件。

我不想使用 Bootstrap。我想要我自己的更简单的 HTML 标记和更少的类名来记住和拥挤一个已经很复杂的标记。

我对组件、组件生命周期、服务、模板、事件、可观察对象和其他 Angular2 概念相当熟悉，但我只能构建一个包含嵌套组件的应用程序，其“父页面”最终位于 .

我觉得 Angular2 可能有一些鲜为人知的概念，大多数教程甚至视频课程都没有解决，这将使我能够实现模态弹出窗口。我想我将不得不以某种方式“破解” DOM 以在整个网页的根部插入一些 html，以便我可以绝对定位模态。我不想使用 jQuery，因为它可能违反 Angular2 的内部工作原理和原则。如果可能的话，如果必须的话，我想知道一种 Angular2 安全的方式来操作 DOM - 我不想从组件代码中追逐 DOM 元素。

我不仅想要警报确认和提示。我希望能够在模态窗口上放置一个表单组件，以允许用户将某些内容保存到数据库或从列表中选择一个项目。

我知道我要求很多，但具体来说：

1. 我的弹出组件至少应具有哪些 html 标记和 CSS？理想情况下，我想在整个页面上放置一个半透明的封面，并在其顶部放置实际的模态。以确保用户无法在该模式窗口之外点击。
2. 如果绝对需要，如何使用服务和可观察对象来拉取这个？
3. 我可以只在主机/父组件上包含此模式组件的标记（在其 @Component({}) 装饰器中定义）并打开它吗？
4. 理想情况下，在主机组件的代码上，我希望能够调用类似selectRecordModal.onSelected(selectedItem => { .... }).onCancelled( () => { ... }); 的东西

Answer 1

您是否考虑过使用材料设计？如果是这样，他们称他们的“模态”只是覆盖作为更通用的功能，因为它们可以用于从菜单到警报的所有内容。

否则，您可以轻松地使用主要是 css 和一个简单的 onclick 事件来加载/关闭模式。事实上，你可以只用 css 来做，但浏览器支持有限。

类似这样的： http://drublic.github.io/css-modal/#！ 它甚至支持 ie8（某种）