路由子元素角2
我有一个关于在角2路由子元素角2
路由子元素的一个问题我的项目目录看起来象：
-app
---login
---registration
---mainApp (this is the main body of the app, with a static content as menu, with few links)
-----subMenu1 (link to some content)
-------(some files here)
-----subMenu2 (link to some content)
-------(some files here)
-----subMenu3 (link to some content)
-------(some files here)
---app.component.ts
---app.component.html
---app.module.ts
---app.routing
---index.ts
它是如何工作的？第一视图是login，在那里你有两种可能性，输入mainApp或输入registration的形式。它工作正常。但是现在我需要处理mainApp和这个mainApp中的子项之间的路由。 mainApp内容只是一个侧门菜单，并不会消失。它始终在屏幕上，只有sidemenu元素的内容正在改变。
什么是我的问题：
我是否需要提供另一路由文件来处理mainApp静态菜单元素和动态内容之间的路由？或者我能够做到这一点，只是从这个文件中处理app和login，registration和mainApp之间的路由？
如果我必须制作另一个路由文件，它会是什么样子？
我的实际路由文件看起来像：
import { Routes, RouterModule } from '@angular/router';
import { MainAppComponent} from './mainApp/index';
import { LoginComponent } from './login/index';
import { RegistrationComponent } from './registration/index';
const appRoutes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'mainApp', component: MainAppComponent },
{ path: 'registration', component: RegistrationComponent },
{ path: '**', redirectTo: '' }
];
export const routing = RouterModule.forRoot(appRoutes);
比方说，我提供了另一种路由文件，它应该是这样的？
import { Routes, RouterModule } from '@angular/router';
import { subMenu1Component } from './subMenu1/index';
import { subMenu2Component } from './subMenu2/index';
import { subMenu3Component } from './subMenu3/index';
const appRoutes: Routes = [
{ path: '', component: mainAppComponent},
{ path: 'subMenu1', component: subMenu1Component },
{ path: 'subMenu2', component: subMenu2Component },
{ path: 'subMenu3', component: subMenu3Component },
{ path: '**', redirectTo: '' }
];
export const routing = RouterModule.forRoot(appRoutes);
我喜欢将我的路线拆分为布局。所以通常我会做一个安全的布局和公共布局。通过这种方式，我可以控制网站的身份验证并保护旨在确保安全的数据。
为了做到这一点，我保持一个文件结构如下图所示，
/app.module.ts
/app.routing.ts
/layouts/secure.component.ts
/layouts/secure.component.html
/layouts/public.component.ts
/layouts/public.component.html
/secure/profile.component.ts
/secure/profile.component.html
/secure/secure.routes.ts
/public/home.component.ts
/public/home.component.html
/public/public.routes.ts
说明
首先我们需要注册所有的组件和设置路线。
注册组件
/app.module.ts
//Layouts
import { PublicComponent } from './layouts/public.component';
import { SecureComponent } from './layouts/secure.component';
import { HomeComponent } from './public/home.component';
import { ProfileComponent } from './secure/profile.component';
@NgModule({
declarations: [
AppComponent,
PublicComponent,
SecureComponent,
HomeComponent,
ProfileComponent
],
providers: [
Guard,
Auth
]
采取特别通知验证下供应商。这将帮助我们确保安全的布局。
接下来我们将设置路线。
app.routing.ts
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full', },
{ path: '', component: PublicComponent, data: { title: 'Public Views' }, children: PUBLIC_ROUTES },
{ path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }
];
正如你所看到的[后卫]是使用验证提供者设置，是我用，以确保安全布局的服务。现在每个这些路线实际上都有子路线，我们可以设置这些路线来控制我们应用的实际导航。
理解这很重要。这些路线将引导流量到正确的布局。然后根据小孩路线接管的路线。你的情况就是你的子组件。
/secure/secure.routes.ts
import { ProfileComponent } from './profile.component';
export const SECURE_ROUTES: Routes = [
{ path: '', redirectTo: 'profile', pathMatch: 'full' },
{ path: 'profile', component: ProfileComponent },
];
记得导入您的组件路由文件，所以它知道启用路由时调用的类。
要额外的功劳，我会继续前进，并提供服务以提供身份验证。这会告诉你如何保护你的路线。
guard.service.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Auth } from './auth.service';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class Guard implements CanActivate {
constructor(protected router: Router, protected auth: Auth) {}
canActivate() {
if (localStorage.getItem('access_token')) {
// logged in so return true
return true;
}
// not logged in so redirect to login page
this.router.navigate(['/home']);
return false;
}
}
通过存储在local storage令牌，我们可以检查，看它是否存在，并验证用户。一旦他们符合标准，他们就可以访问安全路线。
让我知道你是否有任何问题。