angular - 与其他页面具有不同设计的 Angular 2 登录页面

Question

我的主要设计像往常一样在 app.component.html 中。其他组件像母版页一样使用这个。但是如何登录页面会有不同的设计。通常它是像其他组件一样的组件，并且（必须？）在 app.component.html 中工作。

我想不通。有什么建议吗？

Answer 1

您的 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]
})

保持默认路由，如：

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

当您的页面被加载时，路由器服务将默认将您的应用程序重定向到登录页面。这就是通常的应用程序的工作方式。

Answer 2

您可以使用另一个 Angular 应用程序（在引导程序中使用 login.component），但您也可以使用没有特定设计的主要组件（例如 app.component）。没有特定设计的主要组件然后根据您要显示的页面包含特定设计。