Я новичок в angular 4. То, что я пытаюсь достичь, - это установить разные заголовки и нижние колонтитулы макетов для разных страниц в моем приложении. У меня три разных случая:
- Вход, регистрация страницы (без заголовка, без нижнего колонтитула)
маршруты: ['login', 'register']
- Страница маркетингового сайта (это корневой путь и имеет верхний и нижний колонтитулы, в основном эти разделы идут до входа в систему)
маршруты: ['', 'about', 'contact']
- Приложение зарегистрировано на страницах (у меня есть другой верхний и нижний колонтитулы в этом разделе для всех страниц приложения, но этот верхний и нижний колонтитулы отличаются от заголовка и нижнего колонтитула маркетингового сайта)
routes: ['dashboard', 'profile']
Я запускаю приложение временно, добавляя верхний и нижний колонтитулы к компоненту html маршрутизатора.
Пожалуйста, посоветуйте мне лучший подход.
Это мой код:
Приложение \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);
app.component.html
<router-outlet></router-outlet>
приложение/дома/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>
приложение/Логин/login.component.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>
Я видел этот вопрос о переполнении стека, но я не получил четкого изображения из этого ответа