角度4路由添加组件而不是替换它

Question

我在动态加载的子模块中按如下方式配置了路由 我不认为动态加载导致问题，但它可能 - 所以我把它包括在内作为参考。

动态负载

children: [
    {
        path: "dashboard",
        loadChildren: () => new Promise(resolve => {
            (require as any).ensure([],
                require => {
                    resolve(require("./dashboard/dashboard.module").DashboardModule);
                },
                "dashboard");
        })
    },

仪表板的路由模块

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

着陆HTML如下所示

使用

导航到LogDisplayComponent时

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

在HTML上方添加了一个新组件 当然每个组件应该替换内部HTML？

LogDisplayComponent高于ClearingDashboardComponent， 当我点击时，每次我导航时都会添加一个新组件？

如何修复替换组件的路径而不是添加新组件？

我正在使用棱角4.4.4 ...

Answer 1

尝试将您的版本更新为5+。 Angular团队已经解决了这个问题。有关更多信息，请查看以下链接：

https://github.com/angular/angular/issues/17261

https://github.com/angular/angular/issues/13725