我使用路由开发了一个Angular2应用程序。
我的问题场景是:
我有一个具有不同HTML和CSS的登录页面。一旦成功登录,我将重定向到另一个具有不同HTML和CSS的页面。 但我有index.html(登录页面)作为我的主要布局。因此,我需要了解如何使用多个布局?
我做过一些R& D但是我无法理解如何实现它?
请在下面找到代码:
1)app.routing.module
import { NgModule } from '@angular/core';
import { Routes, Router, RouterModule } from '@angular/router';
import { AuthGuard } from './guards/auth.guard';
import { LoginComponent } from './components/login/login.component';
const routes: Routes = [
{
path: '',
redirectTo: '/login',
pathMatch: 'full'
},
{
path: 'login',
component: LoginComponent
},
{
path: 'employee',
component: EmployeeComponent,
canActivate: [AuthGuard]
}];
export class AppRoutingModule { }
export const routedComponents = [LoginComponent,EmployeeComponent];
2)应用程序组件
import { Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
`
})
export class AppComponent {
constructor() {
}
}
3)App模块
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
import { AppComponent } from './app.component';
import { AppRoutingModule, routedComponents } from './app-routing.module';
import { AuthGuard } from './guards/auth.guard';
@NgModule({
imports: [BrowserModule,
HttpModule,
AppRoutingModule
],
declarations: [AppComponent,
routedComponents
],
providers: [AuthGuard],
bootstrap: [AppComponent]
})
export class AppModule { }
4)Index.html
<my-app>
</my-app>
任何帮助都会非常值得赞赏!
谢谢!
答案 0 :(得分:2)
为登录和归位创建单独的路由,将所有其他功能路由作为子路由放置在归属路由中。 请找到以下代码:
{
path: 'login',
component: LoginComponent
},
{
path: 'home',
component: HomeComponent,
children: [
{
path: 'childPage',
component: childPageComponent
}]
}
使用以下行导航到子页面:
this.router.navigate(['/home/childPage'])
感谢!!!
答案 1 :(得分:0)
如本参考文献所述:
我们有几种方法可以为组件添加样式:
- 内联于模板HTML
- 通过设置样式
- 或带有CSS导入的styleUrls元数据
此外,我建议您在一个模块中创建树(层次结构)之类的组件(和路由)。用于检查用户登录状态您需要一个共享服务(例如authservice)。