AOT下的Angular 4动态路由问题

我有一个应用程序，我需要根据用户点击的URL重定向到不同的组件，假设它是

localhost/login

，它应该重定向到route

localhost/login/#/login

，如果

localhost/user

那么

localhost/user/#/spreadsheet

，这在没有AOT的情况下可以正常工作，但在AOT下不行，以下是获取重定向路由的函数：

export function baseHref() {
    return ((document.location.pathname == '/login/') ? 'login' : ((document.location.pathname.split('/')[3] == 'edit') ? 'edit' : ((window.innerWidth >= 720) ? 'spreadsheet' : 'two-panel')));
}

这是我的路线：

export const rootRouterConfig: Routes = [
    // If path is not defined it will redirect to spreadsheet
    { path: '', redirectTo: baseHref, pathMatch: 'full' },
    { path: 'spreadsheet', component: ContactParent },
    { path: 'two-panel', component: ContactParent },
    { path: 'login', component: Login },
    { path: 'login/step1', component: LoginStep1 },
    { path: 'login/step2', component: LoginStep2 },
    { path: 'edit', component: EditSingleContact },
    { path: 'share', component: EditSingleContact }
];

---

在这里，它总是重定向到

两个面板

路由

这可以通过使用函数工厂为

路由

提供路由定义来解决。。。（根据第4.1.2节的规定进行试验）

修改您的AppModule（app.module.ts）：

在导入数组中更改RouterModul.forRoot

imports: [
RouterModule.forRoot(routes)
...

到

在提供程序数组中添加这两个提供程序：

... ANALYZE_FOR_ENTRY_COMPONENTS
} from '@angular/core';
...  ROUTES,
} from '@angular/router';
...
providers: [
{provide: ANALYZE_FOR_ENTRY_COMPONENTS, multi: true, useValue: routes},
{provide: ROUTES, multi: true, useFactory: getRoutes},
...

定义工厂功能（在app.module.ts文件顶部）：

也许您还需要创建新文件，例如：

app.routes.ts

，并将路由定义放在那里

export const routes: Routes = [
            {
                path: '',
...

并将其导入AppModule（app.module.ts）

角度5+

全局（文档、窗口等）变量在AOT编译时未定义。因此编译器会删除它们

使用JIT和AOT的解决方案：

在AppComponent

app.component.ts

中：

constructor(private router: Router) {
    router.resetConfig(appRoutes)
}

import { appRoutes } from 'app.routes.ts';
...
@NgModule({
  ...
  imports : {[
    RouterModule.forRoot(appRoutes),
    ...
  ]}
}

然后像往常一样定义路线：

带有routes

app.routes.ts的文件

：

constructor(private router: Router) {
    router.resetConfig(appRoutes)
}

import { appRoutes } from 'app.routes.ts';
...
@NgModule({
  ...
  imports : {[
    RouterModule.forRoot(appRoutes),
    ...
  ]}
}

声明let someglobalvariable:boolean

export const appRoutes: Routes = [
   {
     path: someglobalvariable ? '' : ':slug', component: SomeCoponent
   }

在AppModule类

app.module.ts

中使用路由：

constructor(private router: Router) {
    router.resetConfig(appRoutes)
}

import { appRoutes } from 'app.routes.ts';
...
@NgModule({
  ...
  imports : {[
    RouterModule.forRoot(appRoutes),
    ...
  ]}
}

---

我也有类似的需要。你能解决你的问题吗？没有人不幸的是，我没有找到合适的解决方案，所以我用一些黑客的东西处理了这个问题（我尝试了类似的方法，但不幸的是，它与延迟加载模块相混淆。