如何在angluar中使用不同的页面布局？例如，使用一个以顶栏、侧导航、主内容区为默认设置的主布局，以及一个更简单的登录页面布局？
我通过使用儿童路线实现了类似的目标：
// app-routing.module.ts
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{ path: '', component: DashboardComponent },
{ path: 'demo', component: DemoComponent },
]
},
{ path: 'login', component: LoginComponent },
{ path: '**', redirectTo: ''}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
// app.component.html
<router-outlet></router-outlet>
// layout.component.html
<body>
<header>
<nav>...</nav>
</header>
<main>
<div>
<router-outlet></router-outlet>
</div>
</main>
<footer>...</footer>
</body>
有更干净的方法吗？我不确定儿童路线是否打算以这种方式使用。
我也遇到过类似的情况，但对我来说，这是模块级
- 一个用于用户模块
- 一个用于身份验证模块
- 一个用于Seach模块
以下是我们所做的：
- 模块级基本组件
- 到此组件的默认路由
- 包含
<router-outlet></router-outlet> - 所有其他组件都在其中渲染
希望它能给你一个继续的想法