Несколько макетов в вложенных маршрутах в Угловом (2+)

Я создаю приложение для панели мониторинга. Я хотел бы, чтобы достичь следующего плана макета в угловых (2+):Несколько макетов в вложенных маршрутах в Угловом (2+)

маршрута - имя - расположение
/- домашняя страница - полная ширина макета с таблицами и графиками, и т.д.
/отчеты - страница с отчетами - та же макета полной ширины с большим количеством таблиц и т. д.
/login - страница входа - нет полной формы макета, просто форма входа в систему на экране центра
/signup - страница регистрации - нет полноразмерной раскладки, просто простая форма регистрации в центре экрана
/сообщения - электронные сообщения - полный макет ширина
/сообщения/новые - новое сообщение электронной почты - средний макет, не унаследовав от полной ширины макета

и т.д. ...

Так в основном то, что я хотел бы do - полностью заменить содержимое <body> на некоторых (дочерних) маршрутах.

Это не хорошо для меня: multiple layout for different pages in angular 2, потому что я не хочу перенаправлять/(корень) в любом месте, например, дома.

Это один не подходит либо: How to switch layouts in Angular2

Любая помощь будет здорово!

источник

2017-02-16 papaiatis

ли у вас есть шанс проверить мой ответ? – wuno

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

Смотрите рабочий пример на https://angular-multi-layout-example.stackblitz.io/ или редактировать в https://stackblitz.com/edit/angular-multi-layout-example

Установите маршрут, как показано ниже

const appRoutes: Routes = [ 

    //Site routes goes here 
    { 
     path: '', 
     component: SiteLayoutComponent, 
     children: [ 
      { path: '', component: HomeComponent, pathMatch: 'full'}, 
      { path: 'about', component: AboutComponent } 
     ] 
    }, 

    // App routes goes here here 
    { 
     path: '', 
     component: AppLayoutComponent, 
     children: [ 
      { path: 'dashboard', component: DashboardComponent }, 
      { path: 'profile', component: ProfileComponent } 
     ] 
    }, 

    //no layout routes 
    { path: 'login', component: LoginComponent}, 
    { path: 'register', component: RegisterComponent }, 
    // otherwise redirect to home 
    { path: '**', redirectTo: '' } 
]; 

export const routing = RouterModule.forRoot(appRoutes);

Рекомендуемые ссылки: http://www.tech-coder.com/2017/01/multiple-master-pages-in-angular2-and.html

источник

2017-10-10 20:24:50

Это именно то, что я искал! Это правильный ответ. Спасибо, @ Рамез! – papaiatis

Ok Я собираюсь дать этому выстрел ...

Маршруты

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

Если вы хотите, чтобы служить компонент непосредственно это было бы идеально,

{ path: '*pathInURL*', component: *NameComponent* }

Прямые проблемы вы столкнулись

три проблемы,

Показать компонент как ребенок.
Показать компонент в шаблоне под названием Полноширинного
Показать компонент в шаблоне под названием mediumwidth

В вашем routes.ts

const APP_ROUTES: Routes = [ 
// landing page of your application 
    { path: '', redirectTo: '/home', pathMatch: 'full', }, 
//anything that will be handled in blank template 
    { path: '', component: BlankComponent, data: { title: 'blank Views' }, children: BLANK_ROUTES }, 
//anything that will be handled in fullwidth 
    { path: '', component: FullComponent, data: { title: 'full Views' }, children: FULL_ROUTES }, 
// anything that will be handled in medium width 
    { path: '', component: MediumComponent, data:{ title: 'Medium Views' }, children: MEDIUM_ROUTES } 
];

Это происходит для пересылки всех путей в URL-адресе для просмотра этих маршрутов. Он проверит маршруты, чтобы увидеть, какой шаблон он будет падать.

Затем создайте 3 каталога.

/пустой

/полный

/средний

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

Так как логин пуст. Было бы в/пустой

/blank/BlankComonent.ts

Кроме того, в каждом из этих каталогов будет создаваться файл маршрутов, который упоминается в начальные маршруты файл мы уже создали.

/blank/blank.routes.ts

export const BLANK_ROUTES: Routes = [ 
    { path: 'login', component: LoginComponent } 
];

Тогда в среде то же самое,

/blank/blank.routes.ts

export const MEDIUM_ROUTES: Routes = [ 
    { path: 'Some/Path', component: SomeMediumComponent } 
];

И то же самое для FULL_ROUTES

Создайте файл маршрутов для каждого созданного нами каталога. Добавьте все свои маршруты, которые живут в одном каталоге, и будут иметь один и тот же шаблон.

Затем мы создадим каталог шаблонов. Вызовите его/макеты

Теперь в этом direcotry это, где вы будете создавать

BlankComponent.ts FullComponent.ts MediumComponent.ts

Каждый из этих компонентов будет иметь свои соответствующие маршруты служили в этих шаблоны. Потому что помните, что наш первый файл routes говорит, что мы будем обслуживать все Child Routes этим templates.

Так макеты будут обслуживаться в router-outlet

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'body', 
    template: '<router-outlet></router-outlet>' 
}) 
export class AppComponent { 
}

источник

2017-02-16 20:21:05 wuno

Спасибо за ваш обширный ответ! Однако одним из моих требований было не перенаправление корневого URL-адреса в любом месте. В вашем примере вы перенаправляете его в/home. – papaiatis

Нет, я говорю, что вы устанавливаете все, что хотите, чтобы целевая страница была такой. Таким образом, когда приложение загружает, загружает правильную страницу. Таким образом, ваши маршруты не загружаются, пока они не назовут путь. Кроме того, если это помогло вам, почему бы вам не принять ответ?Кроме того, поскольку вы задали другой вопрос, который помог вам, я был бы признателен, если бы вы его тоже поддержали. – wuno

Хорошо, дайте мне рабочий пример для этого требования: url: localhost/full layout, url: localhost/login blank layout. – papaiatis

Несколько макетов в вложенных маршрутах в Угловом (2+)

ответ

Смежные вопросы