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内容只是一个侧面菜单，不会消失。它始终在屏幕上，只有来自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);

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

如果您有任何问题，请告诉我。

路由子菜单元素Angular 2

1 个答案: