Question

当我手动尝试打开某个页面时（通过在浏览器中键入url），我的应用程序似乎无法找到要使用的路径。页面正在加载但路由器出口是空的。我也收到＆＃34; EmptyError：序列中没有元素＆＃34;。发现这是canActivate方法的一些麻烦，试图将Observables改为Promise，就像它在EmptyError: no elements in sequence所说的那样，但仍然会出错。

我的应用还有自定义基础href，在index.html中定义

app.routing.ts

const appRoutes: Routes = [
    {
        path: 'project',
        canActivate: [AuthGuard],
        canActivateChild: [AuthGuard],
        children: [
            {
                path: 'home',
                component: HomeComponent
            },
            {
                path: 'events',
                loadChildren: 'app/feature/events/events.module#EventsModule'
            },
        ],
    }
];

所以，当我尝试去＆＃34; localhost / some / base / href / project / home＆＃34; 时，我得到空白页面，只有应用程序的主菜单可见。此外，网址变为＆＃34; localhost / some / base / href＆＃34; 然后我可以通过点击应用主菜单上的按钮浏览我的应用（他们的超链接是＆＃39; localhost / some / base / href / project / events / list＆＃39;例如）。这项工作完美，路线创立。

尝试将appRoutes中的路径更改为＆strong; some / base / href / project＆＃39;现在当我去＆＃34; localhost / some / base / href / project / home＆＃34; HomeCompoment已加载但url变为＆＃34; localhost / some / base / href / some / base / href / project / home＆＃34; 以及应用主菜单上的按钮停止工作。

当然，我可以进行重定向

path: '**',
redirectTo: '/project/home',
pathMatch: 'full'

但是这只会让我只有主页，我想手动导航到app中的其他组件。

更新：我的authGuard，也试过返回Observable和Promise但没有效果。 isAuthorized（）现在总是返回true。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let result: boolean = this.authService.isAuthorized();

        if (result) {
            return true;
        }

        this.authService.setRedirectUrl(state.url);

        return false;
    }

Answer 1

以这种方式制作您的路线：

这里我们有主要分支 - 登录和 Root ，空键 - 路径： ''

子分支，这些路径包含子页面 - 警报，仪表板等。

您可以使用子字段以递归方式构建路径。

如果您想手动导航到路线，您需要以提供的样式定义appRoutes数组中的所有路径。

const appRoutes: Routes = [ {path: 'login', component: LoginComponent}, {path: '', component: MainComponent, redirectTo: '/dashboard', pathMatch: 'full' children: [ { path: 'alert/:id', component: AlertDetailComponent }, { path: 'alerts', component: AlertsComponent }, { path: 'dashboard', component: EriskDashboardComponent } ]}];

您可以制作一些登录/ 404页面的默认路线

path: '**', redirectTo: '/login', pathMatch: 'full'

另外，需要提一下，角度路由器默认情况下，在路由器中使用哈希符号 - ＃;

因此，要导航到登录，您需要构建这样的路径：

#/login #/dashboard

http://localhost:4200/#/login

当我们导入路由器模块时，可以在app.module.ts中找到使用哈希的设置：

imports:[ RouterModule.forRoot(routes, { useHash: true }), ]

具有自定义基础href的Angular 2路由无法找到路由

1 个答案: