基于字符串第一个字符的Angular 9路由

Question

在我的Angular 9应用程序中，当路径以"@“开头时，我想导航到某个页面。

例如，"mywebsite.com/@sample- User“应该导航到用户组件，"mywebsite.com/@sample-user/:post-id”导航到UserPostView组件，"mywebsite.com/sample-user“(路径开头没有@)应该导航到不同的组件。

const routes: Routes = [{path: '@:username', component: UserComponent}, {path: '@:username/:pist-id', component: UserPostViewComponent}, {path: 'sample-user', component: InternalComponent}]

我该怎么做呢？

Answer 1

我认为你可以使用一个自定义的匹配器和正则表达式来实现这一点。

RouterModule.forRoot([
 {
    matcher: (url) => {
      if (url.length === 1 && url[0].path.match(/^@[\w]+$/gm)) {
        return {
          consumed: url,
          posParams: {
            username: new UrlSegment(url[0].path.substr(1), {})
          }
        };
      }
      return null;
    },
    component: ProfileComponent
 }
])

看看这篇文章，它有所有的答案。

https://medium.com/@brandontroberts/custom-route-matching-with-the-angular-router-fbdd48665483