Использование:

ичок в angular 4. Я пытаюсь установить разные верхние и нижние колонтитулы для разных страниц моего приложения. У меня есть три разных случая:

Войти, зарегистрировать страницу (без верхнего колонтитула)

маршруты: ['логин', 'регистрация']

Маркетинговая страница сайта (это корневой путь и имеет верхний и нижний колонтитулы, в основном эти разделы перед входом в систему)

маршруты: ['', 'about', 'contact']

Приложение вошло в страницы (у меня есть разные верхний и нижний колонтитулы в этом разделе для всех страниц приложения, но этот верхний и нижний колонтитулы отличаются от верхнего и нижнего колонтитула маркетингового сайта)

маршруты: ['панель инструментов', 'профиль']

Я временно запускаю приложение, добавляя верхний и нижний колонтитулы к моему 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>

Я виделэтот вопрос на переполнение стека, но я не получил четкую картину из этого ответа

Ответы на вопрос(3)

Ваш ответ на вопрос