路由子菜单元素Angular 2

Question

我有一个关于 Angular 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 内容只是一个侧面菜单，不会消失。它始终在屏幕上，只有侧面菜单元素的内容在变化。

我的问题是什么：

是否需要提供另一个路由文件来处理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);

Answer 1

我喜欢将我的路线分成多个布局。所以通常我会做一个安全的布局和一个公共的布局。通过这种方式，我可以控制网站的身份验证并保护本应安全的数据。

为了做到这一点，我保留了如下所示的文件结构，

/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
    ]

请特别注意提供程序下的 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 }
];

如您所见，[Guard] 是使用 Auth 提供程序设置的，是我用来保护安全布局的一项服务。现在这些路线中的每一个实际上都有子路线，我们可以设置这些路线来控制我们应用程序的实际导航。

理解很重要。这些路线将引导交通到正确的布局。然后根据子路线接管的路线。在您的情况下，这将是您的子组件。

/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 中存储一个令牌，我们可以检查它是否存在并对用户进行身份验证。一旦他们满足标准，他们就可以访问安全路线。

如果您还有其他问题，请告诉我。