Javascript angular 4布线添加组件而不是替换组件

我在动态加载的子模块中配置了如下路由。
我不认为动态负载是导致问题的原因，但它可能-因此我将其包括在内以供参考

动载荷 仪表板路由模块 登陆HTML如下所示

使用导航到

LogDisplayComponent

时

const ne: NavigationExtras = {
    queryParams: { ... }
};
this.router.navigate(["dashboard/logs"], ne);

正在HTML上方添加新组件。
每个组件都应该替换内部HTML吗

LogDisplayComponent

位于

ClearingDashboard组件的上方，
当我单击时，每次导航时都会添加一个新组件

如何修复管线以替换组件而不是添加新组件

我正在使用angular 4.4.4…
尝试将您的版本更新到5+。这个问题已经由Angular团队解决。有关详细信息，请查看以下链接：


您可以在离开路由时（或在触发更改导航事件时）简单地销毁组件。您必须创建一个dom引用

#yourReference，然后简单地添加

this.yourReference.nativeElement.destroy（）

@lucatacagni，这不是正确的方法。Angular管理组件的销毁和构建。检查这是否有帮助：我将等待有人发布一个答案，说明我应该如何适当地重新安排应用程序。我还希望angular创建/删除组件。@akash，这可能是相关的，但我的问题不仅仅是内存问题，组件是DOM的一部分，并且也在显示中。

const routes: Routes = [
    {
        path: "",
        component: ClearingDashboardComponent,
        data: {
            title: "Dashboard"
        }
    },
    {
        path: "logs",
        component: LogDisplayComponent,
        data: {
            title: "Logs"
        }
    }
];

const ne: NavigationExtras = {
    queryParams: { ... }
};
this.router.navigate(["dashboard/logs"], ne);