我是 Angular 4 的新手。我想要实现的是在我的应用程序中为不同页面设置不同的布局头部和底部。我有三种情况:
- 登录、注册页面(没有头部,没有底部)
路由:['login','register']
- 市场推广网站页面(这是根路径,它有一个头部和底部,大多数情况下在登录之前显示这些部分)
路由:['','about','contact']
- 已登录的应用程序页面(在所有应用程序页面中,我有一个不同的头部和底部,但此头部和底部与市场推广网站的头部和底部不同)
路由:['dashboard','profile']
我通过将头部和底部添加到我的路由器组件 HTML 中临时运行应用程序。
请给我建议更好的方法。
以下是我的代码:
app\app.routing.ts
const appRoutes: Routes = [
{ path: '', component: HomeComponent},
{ path: 'about', component: AboutComponent},
{ path: 'contact', component: ContactComponent},
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'profile', component: ProfileComponent },
// otherwise redirect to home
{ path: '**', redirectTo: '' }
];
export const routing = RouterModule.forRoot(appRoutes);
应用组件模板文件
<router-outlet></router-outlet>
app/home/home.component.html
<site-header></site-header>
<div class="container">
<p>Here goes my home html</p>
</div>
<site-footer></site-footer>
应用/关于/about.component.html
<site-header></site-header>
<div class="container">
<p>Here goes my about html</p>
</div>
<site-footer></site-footer>
应用/登录/登录组件.html
<div class="login-container">
<p>Here goes my login html</p>
</div>
应用程序/仪表板/dashboard.component.html
<app-header></app-header>
<div class="container">
<p>Here goes my dashboard html</p>
</div>
<app-footer></app-footer>
我在 stack-overflow 上看到了这个问题, 但是我没有从那个答案中得到清晰的说明。