Как использовать отдельный макет для компонента входа в угловом 2?

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

Я ищу в google, но каждый дает решение diff, которое также непонятно.

const appRoutes: Routes = [ 
{ path: 'alert/:id', component: AlertDetailComponent }, 
{ path: 'alerts', component: AlertsComponent }, 
{ path: 'dashboard', component: EriskDashboardComponent }, 
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }, 
{ path: 'login', component: LoginComponent }, 
];

В app.component.html

<!-- page content --> 
<div class="right_col" role="main"> 
    <router-outlet></router-outlet>   
</div> 
<!-- /page content -->

источник

2017-01-27 Haseeb Ahmad

что вы подразумеваете под ** отдельный логин из всего приложения ** ?? – Aravind

означает, что я хочу использовать макет, отличный от других компонентов. –

Вы должны использовать два 'маршрута' на верхнем уровне (например,' login' и 'content'), а затем поместить оставшиеся маршруты в качестве' '' '' '' 'контента , Пожалуйста, прочитайте [документацию] (https://angular.io/docs/ts/latest/guide/router.html). –

В вашей app.component.html:

<router-outlet></router-outlet>

Затем создайте MainComponent (main.component.ts) и поставить все ваши макет главного приложения в main.component.html:

<!-- page content --> 
<div class="right_col" role="main"> 
    <router-outlet></router-outlet>   
</div> 
<!-- /page content -->

Этот компонент будет родителем для каждого вашего обычного компонента приложения.

Затем в LoginComponent поставил другую раскладку без маршрутизатора-выхода, например:

<div class="login-wrapper"> 
    <div class="login"> 
    ... your login layout 
    </div> 
</div>

Затем измените маршрут быть что-то вроде этого:

const appRoutes: Routes = [ 
    {path: 'login', component: LoginComponent}, 
    {path: '', component: MainComponent, redirectTo: '/dashboard', pathMatch: 'full', 
    children: [ 
     { path: 'alert/:id', component: AlertDetailComponent }, 
     { path: 'alerts', component: AlertsComponent }, 
     { path: 'dashboard', component: EriskDashboardComponent } 
    ]}];

Так MainComponent будет содержать все многоразовые макеты и структуру приложения для любого дочернего компонента, в то время как LoginComponent является независимым и имеет свой собственный макет.

источник

2017-12-01 14:35:21 cutoffurmind

Если у вас есть какие-либо проблемы с дополнительным параметром маршрута в вашем приложении, тогда это более модульное , –

Пришел сюда, чтобы опубликовать это решение. Это также имеет преимущество только для того, чтобы AuthGuard на одной странице скрывать всю оставшуюся часть приложения у не прошедшего проверку пользователя. – Murphy4

у него все еще есть некоторые ограничения для «ленивых модулей загрузки» ... – sdey0081

В «большинстве» родительского компонента вы можете .subscribe к router.eventsdata и как только вы нажмете компонент входа в качестве активного маршрута, этот компонент будет извещен об этом и добавить css class или id для различного макета (темы) Вы хотите (возможно, это будет инкапсулировано в частичный файл scss - если вы не используете scss/sass, возможно, вам стоит его рассмотреть).

После того, как вы измените маршрут (кроме входа в систему), класс исчезнет, а «пользовательский» (другой) макет больше не будет применяться.

Надеюсь, что это поможет. Вы всегда можете использовать команду @Output/@Input() или общий однопользовательский сервис с наблюдаемыми (для отношений между родителями и дочерними компонентами) для совместного использования состояния между этими компонентами и выполнения действий на основе изменения состояния. Если у вас есть какие-либо вопросы/комментарии, не стесняйтесь их добавлять. Я думаю, что угловые документы могут помочь с деталями реализации.

источник

2017-12-01 21:35:12 DrNio

Как использовать отдельный макет для компонента входа в угловом 2?

ответ

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