Question

我一直在使用routing进行Angular项目，因此下面考虑这样的路由。

  {
    path : 'preview/:Id',
    loadChildren : () => import('./path/preview/preview.module').then( m => m.PreviewModule),
  }

因此，此route可以具有字母数字值（如（a-zA-Z0-9）），也可以具有特殊字符，如/，是由crypto.js产生的哈希值，如下所示。

preview/QQZnNw+VjBg/cAXvy6nxdiQ==

因此在上述路线参数Id中，将具有QQZnNw+VjBg/cAXvy6nxdiQ==这样的值，这就是我们想要达到的目的。

错误：但不幸的是，由于无法识别路线，因此出现错误，因为，该值以上的路线中带有“ /”。

以前我尝试过的是我尝试将/:Id(/[\\S]+/g)这样的正则表达式添加到路由参数中，以便它可以接受此路由，

  {
    path : 'preview/:Id(/[\\S]+/g)',
    loadChildren : () => import('./path/preview/preview.module').then( m => m.PreviewModule),
  }

请，任何人都可以帮助我找到方法。

Answer 1

您可以使用UrlMatcher。

function slashMatcher(path: string, param: string): UrlMatcher {
  return (
    segments: UrlSegment[],
    group: UrlSegmentGroup,
    route: Route
  ): UrlMatchResult => {
    const { length } = segments;
    const firstSegment = segments[0];
    if (firstSegment.path === path && length >= 2) { // firstSegment.path == preview
      const paramSegments = segments.slice(1);
      const paramPaths = paramSegments.map(segment => segment.path); // ["QQZnNw+VjBg", "cAXvy6nxdiQ=="]
      const mergedParam = paramPaths.join("/"); // QQZnNw+VjBg/cAXvy6nxdiQ==
      const idSegment: UrlSegment = new UrlSegment(mergedParam, { [param]: mergedParam });
      return { consumed: segments, posParams: { [param]: idSegment } };
    }
    return null;
  };
}

const routes: Routes = [
  { 
    matcher: slashMatcher('preview', 'Id'), 
    loadChildren : () => import('./path/preview/preview.module').then( m => m.PreviewModule),
  },
];

// In component
const id$ = this.route.paramMap.pipe(map(params => params.get('Id')));

Answer 2

感谢answer，我找到了解决方法。

我创建了两个实用程序函数，用于在加密和将哈希码解密回“ /” 时，用一些哈希码替换“ /” 。

 convertSpecial = (text: string) => {
    const ciphertext = this.encrypt(text);
    return ciphertext.replace(/\+/g,'p1L2u3S').replace(/\//g,'s1L2a3S4h').replace(/=/g,'e1Q2u3A4l');
  }

  unconvertSpecial = (ciphertext: string) => {
    ciphertext = ciphertext.toString().replace(/p1L2u3S/g, '+' ).replace(/s1L2a3S4h/g, '/').replace(/e1Q2u3A4l/g, '=');
    const text = this.decrypt(ciphertext);
    return text;
  }

所以在重定向时，

<a href="#" [routerLink]="['/preview', convertSpecial(item?._id)]" > </a>

关于安装组件，

ngOnit()
{
this.Id = this.unconvertSpecial(this.Id);
}

角路由器在路由器变量中处理“ /”

2 个答案: