裝飾器不支持 Function 表達式 Angular 9

Question

我正在研究 Angular 9 並且我在運行時生成動態路由值，我使用如下的 ComplexUrlRouter 並在 Route 中使用相同的值。 但它給了我以下錯誤

錯誤：src/app/app.module.ts(33,45)：不支持“AppRoutes”表達式表單的模板編譯期間出錯。 src/app/utility/complex.url.matcher.ts(4,10): Error during template compile of 'ComplexUrlMatcher' Function expressions are not supported in decorators Consider changing the function expression into an exported function.

app.module.ts

export const AppRoutes: Routes = [
  { path: '',   component: HomeComponent, pathMatch: 'full' },
  {
    path: 'blog/:id',
    component: ArticleComponent,
    children: [
      {
        path: '',
        component: ArticleComponent
      },
      {
        matcher: ComplexUrlMatcher("title", /[a-zA-Z0-9]+/),
        component: ArticleComponent
      },
    ]
  },{
    path:'add-blog',component:AddPostComponent
  },
  {
    path:'category/:id',
    component:MenuDetailsComponent
  },
  { path: '**', redirectTo: '' }
];

complex.url.matcher.ts

import { UrlSegment, UrlSegmentGroup, Route } from '@angular/router';

export function ComplexUrlMatcher(paramName: string, regex: RegExp) {
  return (
    segments: UrlSegment[],
    segmentGroup: UrlSegmentGroup,
    route: Route) => {
    const parts = [regex];
    const posParams: { [key: string]: UrlSegment } = {};
    const consumed: UrlSegment[] = [];

    let currentIndex = 0;

    for (let i = 0; i < parts.length; ++i) {
      if (currentIndex >= segments.length) {
        return null;
      }
      const current = segments[currentIndex];

      const part = parts[i];
      if (!part.test(current.path)) {
        return null;
      }

      posParams[paramName] = current;
      consumed.push(current);
      currentIndex++;
    }

    if (route.pathMatch === 'full' &&
      (segmentGroup.hasChildren() || currentIndex < segments.length)) {
      return null;
    }

    return { consumed, posParams };
  }
}

我搜索了許多 StackOverflow 帖子，但無法解決。 我檢查了 Angular Docs Url https://angular.io/guide/aot-compiler#no-arrow-functions ，其中提到“重寫文件 5 並在稍后發布時自動執行”。 我正在使用 Angular 9 但仍然出現錯誤。

Answer 1

AOT 內部裝飾器不允許內聯 function 調用。

考慮將內聯 function 調用轉換為 function 引用：

export const AppRoutes: Routes = [
  { path: '',   component: HomeComponent, pathMatch: 'full' },
  {
    path: 'blog/:id',
    component: ArticleComponent,
    children: [
      {
        path: '',
        component: ArticleComponent
      },
      {
        matcher: complexUrlMatcher,
        component: ArticleComponent
      },
    ]
  },{
    path:'add-blog',component:AddPostComponent
  },
  {
    path:'category/:id',
    component:MenuDetailsComponent
  },
  { path: '**', redirectTo: '' }
];

和

export const complexUrlMatcher = ComplexUrlMatcher("title", /[a-zA-Z0-9]+/);

export function ComplexUrlMatcher(paramName: string, regex: RegExp) {
  return (
    segments: UrlSegment[],
    segmentGroup: UrlSegmentGroup,
    route: Route) => {
    const parts = [regex];
    const posParams: { [key: string]: UrlSegment } = {};
    const consumed: UrlSegment[] = [];

    let currentIndex = 0;

    for (let i = 0; i < parts.length; ++i) {
      if (currentIndex >= segments.length) {
        return null;
      }
      const current = segments[currentIndex];

      const part = parts[i];
      if (!part.test(current.path)) {
        return null;
      }

      posParams[paramName] = current;
      consumed.push(current);
      currentIndex++;
    }

    if (route.pathMatch === 'full' &&
      (segmentGroup.hasChildren() || currentIndex < segments.length)) {
      return null;
    }

    return { consumed, posParams };
  }
}