为特定路由指定不同的根组件

Question

拥有一个包含网站菜单/基本布局的根应用组件的应用。我想添加一个部分（一些路由/组件），它们将使用不同的根组件（不显示菜单等）。

我已经创建了一个新模块但不确定从哪里开始，有没有办法在不炸毁初始布局的情况下执行此操作？

编辑：发布后我发现了this非常相似的问题，但它没有答案。

Answer 1

您可以将组件分解为更易于管理的结构。我做了类似的事情，我的公共页面有不同的标题，私有页面有不同的标题。为此，您可以创建模块，然后为这些模块配置路由，或尝试类似以下内容：

const routes: Routes = [
{
    path: '', component: rootCommonComponent, //with some common logic
    children: [
       {
       path: '', component: publicHeaderComponent, 
           children: [
                     { path: '', component: HomeComponent },
                     { path: 'about-us', component: AboutUsComponent }
                    ]
       },
       {
         path: '', component: dashboardHeaderComponent, 
           children: [
                    { path: 'dashboard', component: DashboardComponent },
                    { path: 'user-profile', component: UserProfileComponent}
                    ]
        }
    ]
}
];

上述解决方案可以在单个模块中解决。但是，为了拥有更易于管理的代码，我建议将其分解为模块。