Question

默认情况下，我需要重定向到今天的日期。这是我现在拥有的路由配置：

import { CALENDAR_ROUTE } from './_methods/utils';

export const appRoutes: Routes = [
   {
    path: CalendarComponent.path, 
    component: CalendarComponent,
    canActivate: [AuthGuard],
    resolve: refDataResolver,
    data: {
      navi: {
        at: 'main',
        icon: 'navbar-calendar'
      },
      roles: {
        employeeOnly: true
      }
    },
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: CALENDAR_ROUTE.DEFAULT_MONTH
      },
      {
        path: LAYOUT_MONTH,
        children: [
          {
            path: '',
            pathMatch: 'full',
            redirectTo: CALENDAR_ROUTE.MONTH
          },
          {
            path: ':year/:month',
            component: CalendarMonthViewComponent
          },
        ]
      },
      {
        path: LAYOUT_DAY,
        children: [
          {
            path: '',
            pathMatch: 'full',
            redirectTo: CALENDAR_ROUTE.DAY
          },
          {
            path: ':year/:month/:day',
            component: CalendarDayViewComponent
          },
        ]
      }
    ]
    }
  ];

这是我在 utils.ts 中生成字符串的方式：

import { LAYOUT_MONTH } from './../_classes/const';
import * as moment from 'moment';

export function getRoute(withDay: boolean, prefix?: string): string {
    const now = moment();
    const day = ( withDay ) ? now.format('DD') : null;
    return [prefix, now.format('YYYY'), now.format('MM'), day]
        .filter( str => !!str)
        .join('/');
}

export const CALENDAR_ROUTE = {
    DEFAULT_MONTH: getRoute(false, LAYOUT_MONTH),
    MONTH: getRoute(false),
    DAY: getRoute(true)
};

在开发模式和localhost中，一切都进行得很好，直到我需要为UAT / PROD对其进行编译为止，该UAT / PROD利用AOT构建，然后抛出

ERROR in Error during template compile of 'AppRoutingModule' 
Function calls are not supported in decorators but 'getRoute' was called in 'appRoutes' 
'appRoutes' calls 'getRoute' at app/app-routing.module.ts(67,42).

我尚未找到解决此问题的方法。有些问题会使用providers和useValue-但在这里感觉像是过分杀伤。也许有另一种解决方法？也许我应该以不同的方式构造我的组件？有什么想法吗？

Answer 1

一种解决方案可能是将Router注入您的组件，然后在运行时更新路由配置。

我自己还没有测试过，但是这个主意是这样的：

在您的组件中

constructor(private router: Router) {
   this.router.config.unshift({path: '', component: '', redirectTo: 'Your new redirect path'})
}

Angular2路由：redirectTo一个动态生成的字符串

1 个答案: