如何使用Bootstrap和WITHOUT jQuery创建Angular2模态组件？

我不想使用Bootstrap.我想要自己更简单的HTML标记,以及更少的类名来记住并挤出已经很复杂的标记.

我对组件,组件生命周期,服务,模板,事件,可观察对象和其他Angular2概念非常熟悉,但我只能构建一个具有嵌套组件的应用程序,其“父页面”最终位于< router-outlet> .

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

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

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

>我的弹出组件至少应包含哪些html标记和CSS？理想情况下,我想在整个页面上放置一个半透明的封面,并在其上面放置实际的模态.确保用户无法在该模态窗口外单击.
>如果绝对需要,如何使用服务和可观察量来实现这一目标？
>我可以在主机/父组件上包含此模态组件的标记(在其@Component({})装饰器中定义)并打开它吗？
>理想情况下,在主机组件的代码上,我希望能够调用selectRecordModal.onSelected(selectedItem => {….}).onCancelled(()=> {…});