Как переключить макеты в Angular2

Ответ 1

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

<router-outlet name="header"></router-outlet>
<router-outlet name="navbar"></router-outlet>
<router-outlet></router-outlet>
<router-outlet name="footer"></router-outlet>

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

Пример 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. Это ваш маршрут конфигурации для вашего второго макета

 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'}
  ]}
];

Ответ 2

В 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

<router-outlet>

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

<div class="sidebar"></div>
<div class="content">
  <router-outlet></router-outlet>
</div>

Ответ 3

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

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

<router-outlet></router-outlet>

полный layout.component.html

<h1>Full layout</h1>
<router-outlet></router-outlet>
<h1>FOOTER</h1>

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

<h1>Simple layout</h1>
<router-outlet></router-outlet>

Ответ 4

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

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

• Создайте файл 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: `
      <h1>{{title}}</h1>
      <a [routerLink]="['/login']">Login</a>
      <router-outlet></router-outlet>
     `,
    directives: [ROUTER_DIRECTIVES]
  })
  export class AppComponent {
  
  }
  

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