angular2组件-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

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