Угловая страница входа 2, которая отличается дизайном от других страниц

Question

Моя основная конструкция находится в app.component.html как обычно. Другие компоненты используют эту страницу как главную страницу. Но как страница входа будет иметь другой дизайн. Обычно это компонент, как и другие, и (должен?) Работать в app.component.html.

Я не могу понять это. Любой совет?

Answer 1

Вы можете использовать другое угловое приложение (login.component, используемое в бутстрапе), но вы также можете использовать основной компонент (например, app.component) без определенного дизайна. Основной компонент без конкретного дизайна затем включает конкретный дизайн в зависимости от страницы, которую вы хотите отобразить.

Answer 2

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

@Component({ 
    selector:'payroll-app', 
    template:`<div><router-outlet></router-outlet></div>`, //{{}} these four curly braces are called 'interpolation' 
    directives: [ROUTER_DIRECTIVES], 
    providers: [Utils,BonusService, ModelService, HTTP_PROVIDERS, DialogService] 
}) 

И Войти, как это:

@Component({ 
    templateUrl:'./app/login/login.component.html', 
    selector:'app-login', 
    styleUrls:['./app/login/login.component.css'], 
    directives:[ROUTER_DIRECTIVES] 
}) 

Keep Маршрут по умолчанию, как:

LoginRoutes = [ 
    { path: 'login', component: LoginComponent}, 
    {path: '', redirectTo: '/login', pathMatch: 'full'} 
] 

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