Angular 应用程序外壳组件

嗯，我有一个应用程序，它有顶部导航，顶部过滤器等，这是常见的，只有视图会随着路线的改变而改变，视图是

电子表格
&
两个面板
。因此，我创建了一个调用其他组件（标题、过滤器、电子表格和两个面板）的父组件。在路线中，我为电子表格和两个面板调用父组件，如下所示：

{ path: 'two-panel', component: ContactParent },
{ path: 'spreadsheet', component: ContactParent }

下面是父组件模板：

<top-nav></top-nav>
<top-filter></top-filter>

<spreadsheet *ngIf="currentUrl == '/spreadsheet'"></spreadsheet>
<two-panel *ngIf="currentUrl == '/two-panel'"></two-panel>

<cancel-payment></cancel-payment>
<delete-dialog></delete-dialog>
<create-link></create-link>
<message></message>



所以这里一切正常，因为在第一次刷新时，我已经得到了这些常见组件（顶部导航、顶部过滤器等），解决了为什么它们在路线更改时再次重新加载的问题，我如何避免这种情况？为了更好地理解，以下是屏幕截图：

无法在代码中查看。不确定您如何在应用程序中管理路由。我相信如果组件top nav和top filter位于父组件中，它们将重新加载。我认为如果你应该在路由器中放置
电子表格
和
两个面板
组件，并在父模板上添加delcare，那么你应该使用路由而不是ng。我不想在路由器中放置电子表格和两个面板，但在父模板中声明
路由器出口
是有意义的，通过一些解决方法，我认为我的问题将得到解决。谢谢大家。。。