Различные маршруты для целевой страницы и панели инструментов в Angular2

Я разрабатываю сайт блога с Angular 2. Теперь я хочу показать форму регистрации/входа на целевой странице, когда пользователь посещает мой сайт, только форма регистрации не будет отображать меню или заголовок.

Теперь, когда пользователь вошел в систему, он будет перенаправлен на /dashboard и увидит меню, заголовок и содержимое.

Теперь как начать. Можно ли использовать две роутер-розетки?

Изображение макета регистрации: http://prntscr.com/dwh1qg

Макет информационной панели: http://prntscr.com/dwh2lp


angular routes router-outlet
person Rakesh Roy    schedule 16.01.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Каждый компонент может содержать router-outlet.

Я думаю, что вы должны создать компонент App, который будет содержать маршруты к компоненту Dashboard и компоненту Default. В эти компоненты вы также должны поместить router-outlet и создать разные маршруты.

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

@RouteConfig([
   { path: '/dahsboard/...', name: 'Dashboard', component: DashboardComponent },
   { path: '/...', name: 'Default', component: DefaultComponent }
])
export class AppComponent

Ваш шаблон для этого компонента может быть таким же простым, как <router-outlet></router-outlet>.

Тогда ваши дочерние компоненты могут иметь другую маршрутизацию и разные шаблоны.

@RouteConfig([
   { path: '/home', name: 'Home', component: HomeComponent },
   { path: '/sign-up', name: 'SignUp', component: SignupComponent }
])
export class DefaultComponent

И его шаблон также должен содержать <router-outlet></router-outlet>.

person Mateusz Woźniak    schedule 16.01.2017
comment
я думаю, что мы больше не используем @RouteConfig в Angular2 (Angular cli). - person Rakesh Roy; 17.01.2017
comment
@RakeshRoy это зависит от версии, в самой новой нет @RouteConfig, но я написал это для примера. - person Mateusz Woźniak; 17.01.2017