В вашем основном компоненте html вы можете добавить следующие маршруты, которые вы будете использовать для переключения макета.

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

Пример 1 Предположим, что первый макет имеет только верхний и нижний колонтитулы без боковой панели / навигационной панели

 export const welcome_routes: RouterConfig = [ { path: 'firstpage', children:[ { path: 'login', component: LoginComponent}, { path: 'signup', component: SignupComponent}, { path: '' , component: Header1Component, outlet: 'header'} { path: '' , component: Footer1Component, outlet: 'footer'} ]} ]; 

Пример 2. Это ваш маршрут config для вашего второго макета

  export const next_layout_routes: RouterConfig = [ { path: 'go-to-next-layout-page', children:[ { path: 'home', component: HomeComponent}, { path: '' , component: Header2Component, outlet: 'header'} { path: '' , component: NavBar2Component, outlet: 'navbar'} { path: '' , component: Footer2Component, outlet: 'footer'} ]} ]; 

Благодаря этому очень легко добавить третий, четвертый и … макет на свою страницу.

Надеюсь это поможет

** Обновлено **

RouterConfig изменен на Маршруты.

Таким образом, приведенный выше код будет

 export const welcome_routes: Routes = [ { path: 'firstpage', children:[ { path: 'login', component: LoginComponent}, { path: 'signup', component: SignupComponent}, { path: '' , component: Header1Component, outlet: 'header'} { path: '' , component: Footer1Component, outlet: 'footer'} ]} ]; 

В Angular 4 (и, вероятно, также в Angular 2) вы можете:

 const routes: Route[] = [ {path: 'admin', redirectTo: 'admin/dashboard', pathMatch: 'full'}, { path: 'admin', children: [ { path: '', component: DefaultLayoutComponent, children: [ {path: 'dashboard', component: DashboardComponent} ] }, { path: '', children: [ {path: 'login', component: LoginComponent} ] } ] } ] 

Путем использования path: '' вам не придется изобретать разные пространства имен url, чтобы использовать простой макет. Вот как выглядят взгляды:

index.html:

по умолчанию-layout.html:

Еще один простой способ – определить маршруты детей:

 const appRoutes: Routes = [ { path: 'fullLayout', component: FullLayoutComponent, children: [ { path: 'view', component: HomeComponent }, ] }, { path: 'simpleLayout', component: SimpleLayoutComponent, children: [ { path: 'view', component: HomeComponent }, ] } ]; 

/ fullLayout / view – показывает полную структуру макета

/ simpleLayout / view – показывает простую структуру компоновки

app.component.html

полный layout.component.html

 
Full layout
  
FOOTER 

простой layout.component.html

 
Simple layout
  

Я настоятельно рекомендую прочитать инструкцию от Angular team по маршрутизации здесь .

Существует некоторая настройка, которую вам нужно реализовать, но некоторые из основных этапов:

• Создайте файл app.routes.js, в котором указывается имя маршрута и компонент, который должен быть загружен при ударе этого маршрута.

   import { provideRouter, RouterConfig } from '@angular/router'; import { LoginComponent } from 'components/login.component' const routes: RouterConfig = [ { path: '/login', //name of the route component: LoginComponent //component to load when route is hit } ]; export const appRouterProviders = [ provideRouter(routes) ]; 

• В главном компоненте, где вы нажмете ссылку (то есть навигационную панель), вам нужно будет добавить [routerLink] = ‘myRouteName’ (например, ‘/ login’) и пару тегов с маршрутизатором, в которых находится новый компонент (aka view).

   import { Component } from '@angular/core'; import { ROUTER_DIRECTIVES } from '@angular/router'; @Component({ selector: 'nav-bar', template: ` 
  {{title}}
   Login  `, directives: [ROUTER_DIRECTIVES] }) export class AppComponent { } 

Надеюсь, это поможет. Я изучал угловой 2 за последний месяц, а документация на angular.io была бесценной. Действительно ясное, пошаговое объяснение по многим аспектам и хорошая первая остановка при вступлении в новую тему.