登录后的路由问题

Question

我正在构建angular2应用程序，目前我有一个家庭组件与菜单栏和路由器出口的主要内容。我添加了登录机制，所以如果用户没有经过身份验证，那么登录页面将显示在整个屏幕上，登录后用户将被路由到上面结构的主/主组件。

当我运行登录页面加载的应用程序时，成功验证后，它会将我路由到主页，但在加载菜单的主页（如Dashboard1、Dashboard2、Report1等）中，链接无法正常工作。当我点击任何菜单栏链接时，我得到了下面提到的错误。

    lib/@angular/platform-browser/bundles/platform-browser.umd.js:1900 Error: Uncaught (in promise): Error: Cannot match any routes: 'Report1'
        at resolvePromise (zone.js:538)
        at zone.js:515
        at ZoneDelegate.invoke (zone.js:323)
        at Object.onInvoke (lib/@angular/core/bundles/core.umd.js:9100)
        at ZoneDelegate.invoke (zone.js:322)
        at Zone.run (zone.js:216)
        at zone.js:571
        at ZoneDelegate.invokeTask (zone.js:356)
        at Object.onInvokeTask (lib/@angular/core/bundles/core.umd.js:9091)
        at ZoneDelegate.invokeTask (zone.js:355)

我在两个地方有路由器出口标签，即在AppLoader中的1处，以及正在加载实际菜单的LayoutMenu组件中，其中包含用于加载主要内容的路由器出口。

路由器插座的正确位置是什么？我在哪里犯了错误？

以下是routeconfig的代码

export const routes: RouterConfig = [
    { path: '', component: Login },
    { path: 'login', component: Login },
    { path: 'Home', component: Home },
    { path: '**', component: Login }
];
export const LOGIN_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

首页/菜单例程如下

export const routes: RouterConfig = [
    {
        path: 'home',
        component: Home,
        // canActivate: [AuthenticationGuard],
        children: [

            { path: 'Dashboard1', component: Dashboard1 },
            { path: 'Dashboard2', component: Dashboard2 },
            { path: 'Report1', component: Report1 },
            { path: 'Report2', component: Report1 },

            {
                path: 'ManageRedisCache',
                component: ManageRedisCache,
                children: [
                    { path: '', component: ExtractorQueue },
                    { path: 'Extractor', component: Extractor },
                    { path: 'Schedule', component: Schedule },
                    { path: 'CacheVisualization', component: CacheVisualization }
                ]
            }
        ]
    }
];

export const HOME_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

上述2个routeconfig通过主管道注入。ts引导。基本上。ts bootstrap I还注入了AppLoader，其中包含。

AppLoader组件如下所示，其中包含/加载登录页面。

@Component({
    selector: 'my-app',
    template: `<router-outlet></router-outlet>`,
    directives: [Login, ROUTER_DIRECTIVES ]
})
export class AppLoader {
}

LayoutMenu组件如下所示：

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
    selector: 'MenuLayout',
    template: `
        <a [routerLink]="['/Dashboard1']"><h4>Dashboards 1</h4></a>
        <a [routerLink]="['/Dashboard2']"><h4>Dashboards 2</h4></a>
        <a [routerLink]="['/Report1']"><h4>Reports 1</h4></a>
        <div class="outer-outlet">
        <router-outlet></router-outlet>
        </div>  `,
    directives: [LeftMenu, ROUTER_DIRECTIVES]
})
export class LayoutMenu { }

Answer 1

Angular路由器足够灵活，可以实现具有不同配置的相同结果。贝娄就是一个可能的例子。

您需要两个不同的基本模板：

1. 登录模板
2. 内容模板（左菜单/右工作区）

一个示例主应用程序。组件路由配置：

export const routes: RouterConfig =
[
    ...ContentRoutes,
    {
        path: 'login',
        component: LoginComponent
    },
{
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    },
    {
        path: '**',
        redirectTo: '/404',
        pathMatch: 'full'
    }
];

现在转到content.component路线（具有左菜单/右工作区的页面）：

export const ContentRoutes: RouterConfig = [
    {
        path: 'home',
        component: ContentComponent,
        canActivate: [AuthenticationGuard],
        children: [
            {
                path: '',
                component: MainHomeComponent,
                canActivate: [AuthenticationGuard]
            }
        ]
    },
    {
        path: '404',
        component: ContentComponent,
        canActivate: [AuthenticationGuard],
        children: [
            {
                path: '',
                component: PageNotFoundComponent,
                canActivate: [AuthenticationGuard]
            },
        ]
    },
    {
        path: '500',
        component: ContentComponent,
        canActivate: [AuthenticationGuard],
        children: [
            {
                path: '',
                component: PageErrorComponent,
                canActivate: [AuthenticationGuard]
            },
        ]
    },
];

所有内容。组件路由应该在路由之前通过一个AuthenticationGuard，这就是canActivate属性的原因。更多关于角度路由器文档。

我还添加了404/500路由示例。

打开模板。基本应用程序。组件模板将只有一个路由输出：

<router-outlet></router-outlet>

它应该路由到任一登录。组件或内容。组件（取决于用户身份验证）。

所容纳之物组件是您的“左菜单和工作区”模板，因此它应该同时具有基本布局组件和一个RouterOutlet：

<div id="wrapper">
    <div id="page-wrapper" class="gray-bg">
        <div class="left-menu">
            <app-menu></app-menu>
        </div>
        <router-outlet></router-outlet>
        <app-footer></app-footer>
    </div>
</div>

（示例html）

扼要重述：

基本路径（“/”）将重定向到“/home”，默认为以ContentComponent为父级的MainHomeComponent。自由添加更多的子路由到它。

github上的示例项目。