Angular2：“导航”到叠加层

Question

在我正在处理的Angular2.0b6应用程序中（我第一次接触Angular2），到目前为止我只使用基于[routerLink]的“常规”超链接导航。

但是现在，我想“导航”到叠加层（某些元素浮动在当前页面上方）。最后，叠加层应包含基于模型的表单，用于编辑叠加层下方页面上显示的项目之一。我可以很容易地使用jQuery或简单的JS来完成它，但我想这样做“Angular方式”。

当然，打开叠加层的元素必须具有(click)“属性”，该属性会触发事件处理程序。但是在事件处理程序中该怎么做？根据我的理解，我需要在页面中添加一个组件，组件负责处理表单提交。但是如何在屏幕上显示该组件？

Answer 1

在Angular 2 Material的folder（早期阶段）中，有一个如何做到这一点的例子。您也可以运行该应用以查看它的实际效果。

解决方案的大部分是创建自定义Dialog组件，当您只想打开对话框时，使用DynamicComponentLoader将其加载到页面中。

通过这种方式，您不必预先渲染对话框并将其隐藏在页面上直到显示，从而减少整体html大小。